Question

我动态创建表单。有一个添加行按钮，用于添加一个包含删除行按钮的新行。

我最初是用角度写的，我能够将"$index"传递给函数以删除特定的线。
我现在用纯js重写我的代码，我的问题是：我怎样才能实现相同的功能呢？

Answer 1

我不太了解您的设置，但删除div只是 parentNode.removeChild（yourDiv）

如果您只有parentNode但知道要删除的div的索引，那么 parentNode.removeChild（parentNode.children [I]）

Answer 2

`<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/

我希望能帮到你:)。

Answer 3

根据您的要求按索引删除元素的示例可以在此jsfiddle中找到：https://jsfiddle.net/ChaitanyaMunipalle/9z73rfjx/2/。我假设你会照顾添加线和＆amp;动态删除按钮。它只包含删除。

由于你没有提供任何代码，我认为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>

您必须添加事件侦听器才能删除按钮。并且您必须使用闭包来保存单击按钮的索引。

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

如何使用纯javascript删除特定索引处的div元素

3 个答案: