如何動態刪除div後的內容已附加Javascript

如何刪除以前使用Javascript追加添加的任何項目？我收到'找不到節點'錯誤。如何動態刪除div後的內容已附加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); 
}

來源

2016-09-19 user3489502

如何oldItem自身的孩子？ – epascarello

如果你看看html，那些添加的項目沒有ID。它們看起來像''。你應該在添加節點之前給節點一個唯一的id，然後刪除像document.getElementById（'item4'）或其他什麼 – terpinmd

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

來源

2016-09-19 19:22:22

好吧，我錯過了很多細節使它工作。這是極好的。非常感謝，我修改了我的重拳 – user3489502

既然你已經有了一個對父對象的引用，你可以跟進這個SO發佈到看看如何刪除所有的孩子。

Remove all child elements of a DOM node in JavaScript

如果要刪除該節點的唯一特別的孩子，你必須記住的地方對它們的引用。

來源

2016-09-19 19:20:46

如何動態刪除div後的內容已附加Javascript

回答

相關問題