Dynamic div using cloneNode

by Michel Plungjan

HTML

<input type="text" id="timedrpact1" value="1 am" /><br/>
<input type="text" id="timedrpact2" value="2 am" /><br/>
<input type="text" id="timedrpact3" value="3 am" /><br/>
<input type="text" id="timedrpact4" value="4 am" /><br/>
<input type="text" id="timedrpact5" value="5 am" /><br/>
<div id="showselecteditems"></div>

JavaScript

var div = document.createElement("div");
var lnk = document.createElement("a");
var img = document.createElement("img")
img.className="remove";
img.src = "https://uperform.sc.gov/ucontent/e14c3ba6e4e34d5e95953e6d16c30352_en-US/wi/xhtml/static/noteicon_7.png";
lnk.appendChild(img);
div.appendChild(lnk);
// document.body.appendChild(div);
function getInputs() {
  var container = document.getElementById('showselecteditems');
  for (var i=1;i<=5;i++) {
    var fld = document.getElementById('timedrpact'+i);
    if (fld) {
      var newDiv = div.cloneNode(true);
        console.log(newDiv);
      newDiv.getElementsByTagName("a")[0].appendChild(document.createTextNode(fld.value));
      container.appendChild(newDiv);
    }
  }
}    
window.onload=function() {
  document.getElementById('showselecteditems').onclick = function(e) {
      console.log("click");
    e=e||event; // IE sucks
    var target = e.target||e.srcElement; // and sucks again
    // target is the element that has been clicked
    if (target && target.className=='remove') {
      parentDiv = target.parentNode.parentNode;
      parentDiv.parentNode.removeChild(parentDiv);
      return false; // stop event from bubbling elsewhere
    }
  }    
  getInputs();  
}