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：

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

由于您已经有对父对象的引用，因此您可以跟进此SO帖子以了解如何删除所有子对象。

Remove all child elements of a DOM node in JavaScript

如果您只想删除该节点的特定子节点，则必须记住某处对它们的引用。

Answer 2

只需使用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>

如何在附加了Javascript后从div中动态删除内容

2 个答案: