Wie man Inhalt von einem div dynamisch entfernt, nachdem es mit Javascript angefügt wurde

Question

Wie kann ich irgendwelche der Elemente entfernen, die vorher mit Javascript hinzugefügt wurden? Ich bekomme den Fehler 'Knoten wurde nicht gefunden'.

Meine 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); 
}  

Answer 1

Verwenden Sie einfach element.remove(). Außerdem sollten Sie eindeutige ID Attributwerte für die geklonten Elemente erstellen. Siehe nachstehendes Beispiel:

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>

Answer 2

Da Sie bereits einen Verweis auf das übergeordnete Objekt haben, können Sie Follow-up veröffentlichen diese SO Sehen Sie, wie Sie alle Kinder entfernen können.

Remove all child elements of a DOM node in JavaScript

Wenn Sie nur bestimmte Kinder dieses Knotens entfernen möchten, müssen Sie Verweise auf sie irgendwo erinnern müssen.