divでコンテンツを動的に削除する方法

Question

以前に追加したJavascriptを使用して追加したアイテムを削除するにはどうすればよいですか？ 「ノードが見つかりませんでした」というエラーが表示されます。

私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：あなたはすでに親オブジェクトへの参照を持っているので、あなたはこれがSOに投稿

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

element.remove()をそのまま使用してください。また、複製された項目の一意のid属性値を作成する必要があります。以下の例を参照してください：

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

をフォローアップすることができますがすべての子供を取り除く方法を見てください。

Remove all child elements of a DOM node in JavaScript

あなたは、そのノードの唯一の特定の子供を削除したい場合は、どこかへの参照を覚えておく必要があります。