如何使用純javascript刪除特定索引處的div元素

Question

我動態創建表單。有一個增加行按鈕，添加一個新行，其中包括一個刪除行按鈕。

我最初寫了這個角度，我能夠通過"$index"到功能刪除特定的行。
我現在正在用純js重寫我的代碼，我的問題是：我該如何去實現這個相同的功能？

Answer 1

按照你的要求按索引刪除元素的例子可以在這個jsfiddle中找到：https://jsfiddle.net/ChaitanyaMunipalle/9z73rfjx/2/。我假設你會照顧添加線&動態刪除按鈕。它只包含刪除。

由於你沒有給任何代碼，我以爲HTML看起來像下面的一個：

<div id="lines"> 
    <div class="line-item"> 
     <input type="text" name="line-value"/> <button class="delete-line">Delete</button> 
    </div> 
    <div class="line-item"> 
     <input type="text" name="line-value"/> <button class="delete-line">Delete</button> 
    </div> 
    <div class="line-item"> 
     <input type="text" name="line-value"/> <button class="delete-line">Delete</button> 
    </div> 
</div> 

您必須添加事件偵聽器來刪除按鈕。你必須使用closure來保存點擊按鈕的索引。

var deleteItem = function(index) { 
    var divElements = document.getElementsByClassName("line-item"); 
    for (var i = 0; i < divElements.length; i++) { 
    if (i == index) { 
     divElements[i].parentNode.removeChild(divElements[i]); 
     break; 
    } 
    } 
}; 

var deleteButtons = document.getElementsByClassName("delete-line"); 

for (var i = 0; i < deleteButtons.length; i++) { 
    (function(index){ 
     deleteButtons[i].addEventListener('click', function() { 
      deleteItem(index); 
     }, false); 
    })(i);  
} 

Answer 2

我不太明白您的設置，但刪除一個div只是 parentNode.removeChild（yourDiv）

如果你只有parentNode，但知道你想要刪除的div的指數，然後 parentNode.removeChild（parentNode.children [I]）

Answer 3

`<div id="div1"> 
    <p id="p1">This is a paragraph.</p> 
    <p id="p2">This is another paragraph.</p> 
</div> 
<script> 
    var parent = document.getElementById("div1"); 
    var child = document.getElementById("p1"); 
    parent.removeChild(child); 
</script>` 

在這一個的jsfiddle例如：

https://jsfiddle.net/AlfonsoRamirez9/ttj1sLo5/

我希望能幫到你:)