Dynamically add/remove HTML elements

Example for StackOverflow answer: https://stackoverflow.com/a/47493686/4746328

by Brian Peacock

HTML

<label for="A">pA: <input id="A" type="checkbox" title="nr_1" name="abccheck" checked></label> <br>
    <label for="B">pB: <input id="B" type="checkbox" title="nr_2" name="abccheck" checked></label> <br>
    <label for="C">pC: <input id="C" type="checkbox" title="nr_3" name="abccheck" checked></label> <br>
    <hr>
    <div id="display-container">
        <p id="pA">A</p>
        <p id="pB">B</p>
        <p id="pC">C</p>
    </div>
    <hr>

CSS

body {
  color:#000;
  background:#f0f0f9;
  padding:1em;
}
#display-container {
  padding-left:2em;
}

JavaScript

function clickMe(event) {
        var boxID = event.target.id;
        var container = document.getElementById(
            "display-container"
        );

        /* look for a corresponding P-element */
        var pCheck = document.getElementById(
            "p" + boxID
        );
        /* variable to hold newly created P-element */
        var pTag;

        /* if the corresponding P-element
           exists then remove it, otherwise
           create and add it */
        if (pCheck) {
            /* remove */
            container.removeChild(pCheck);
        } else {
            /* create new P-element */
            pTag = document.createElement("p");
            /* add unique id to new P */
            pTag.id = "p" + boxID;
            /* add text to new P */
            pTag.textContent = boxID;
            /* insert into #display-container */
            container.appendChild(pTag);
         }
    }
    function addEvents() {
        /* collect all checkboxes */
        var cBoxes = document.querySelectorAll( "input[name=abccheck]" );
        /* loop and add an event listener
           to each element in the collection */
        [].slice.call(cBoxes).forEach(function(cb) {
            cb.addEventListener(
                "click", clickMe, false
            );
        });
    }
    
    addEvents();