How to dynamically remove content from a div after it has been appended with Javascript

Question

How can I remove any of the items that were added previously using Javascript append? I get the 'Node was not found' error.

See my plunker: https://plnkr.co/edit/CWOxWh3SL5RBFmgJIiwS

html:

    <div style="display:none">    
    <div id="iteminitial">      
    <div class="row" style="padding: 0.5em 0 0.5em 0.5em">
          <div class="col-sm-4" >
               <input class="form-control" type="text" name="number[]">
          </div>
          <div class="col-sm-4" >
               <input class="form-control" type="text" name="period[]">                   
          </div>  
          <div class="col-sm-4" >
               <input class="btn btn-default" type="button" value="Remove item" onClick="removeitem();">                   
          </div>              
    </div>
    </div>
    </div>


    <div id="item">     

    </div>


    <div class="row" style="padding: 0.5em 0 0.5em 0.5em">                  
          <input class="btn btn-default" type="button" value="Add another item" onClick="additem();">
    </div>

js:

function additem(){

      var newitem          = document.getElementById('item');
      var initialitem_clone      = document.getElementById('iteminitial').cloneNode(true);

      newitem.appendChild(initialitem_clone);
} 

function removeitem(){

      var olditem          = document.getElementById('item');
      olditem.removeChild(olditem); 
}

IF you look at the html, those items that are added to not have an id. They look like ''. You chould give the node a unique and id before appending it, then remove like document.getElementById('item4') or whatever — terpinmd, Sep 19 '16 at 19:18

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

Since you already have a reference to the parent object, you can follow up this SO post to see how to remove all the children.

Remove all child elements of a DOM node in JavaScript

If you want to remove only particular children of that node, you will have to remember references to them somewhere.

edited May 23 '17 at 10:34

Community

1
1

answered Sep 19 '16 at 19:20

Vladimir M

4,403
1
19
24

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2016-09-19T19:28:53.970

Just use element.remove(). Also, you should create unique id attribute values for the cloned items. See the example below:

var itemCount = 1;
    function additem(){
          var newitem          = document.getElementById('item');
          var initialitem_clone      = document.getElementById('iteminitial').cloneNode(true);
          //make the id value unique
          initialitem_clone.id = 'item_'+itemCount++;
          newitem.appendChild(initialitem_clone);
    } 
    
    function removeitem(item){
          //item corresponds to the link that was clicked
          item.parentNode.parentNode.parentNode.remove(); 
    }

 <div style="display:none">    
    <div id="iteminitial">      
    <div class="row" style="padding: 0.5em 0 0.5em 0.5em">
          <div class="col-sm-4" >
               <input class="form-control" type="text" name="number[]">
          </div>
          <div class="col-sm-4" >
               <input class="form-control" type="text" name="period[]">                   
          </div>  
          <div class="col-sm-4" >
<!-- pass this to the removeitem function -->
               <input class="btn btn-default" type="button" value="Remove item" onClick="removeitem(this);">                   
          </div>              
    </div>
    </div>
    </div>


    <div id="item">     

    </div>


    <div class="row" style="padding: 0.5em 0 0.5em 0.5em">                  
          <input class="btn btn-default" type="button" value="Add another item" onClick="additem();">
    </div>

Ok, I was missing lots of details to make it work. That is excellent. Thanks so much, I modified my plunker — user3489502, Sep 19 '16 at 19:31

How to dynamically remove content from a div after it has been appended with Javascript

2 Answers2