Question

当尝试从Javascript中的类中删除表单中的元素时，由于某种原因它会删除所有其他元素。我完全不知道是什么导致了这种行为，并希望有人可以指出我的错误逻辑在哪里。

我只想留下第一个元素（inv0）并删除所有其余的元素，但是使用下面的确切代码，它会给我带来inv0，inv2和inv4。

JS：

function clearInventoryFields()
{
    // Get the element by their class name
    var invFields = document.getElementsByClassName('inventory');

    for (var i = 1; i < invFields.length; i++)
    {
        invFields[i].parentNode.removeChild(invFields[i]);
    }
}

HTML看起来如下......

<fieldset style="width:62%; float:left; margin-left: 19%;">
<div id="inv0" class="inventory" style="margin-bottom:5px;"> … </div>
<div id="inv1" class="inventory" style="margin-bottom:5px;"> … </div>
<div id="inv2" class="inventory" style="margin-bottom:5px;"> … </div>
<div id="inv3" class="inventory" style="margin-bottom:5px;"> … </div>
<div id="inv4" class="inventory" style="margin-bottom:5px;"> … </div>
<div id="inv5" class="inventory" style="margin-bottom:5px;"> … </div>
</fieldset>
<div class="clear"></div>

Answer 1

我能弄清楚的最简单的方法是，

$('.inventory:gt(0)').each(function() {
    $(this).remove();
});

Working Fiddle

Answer 2

试试这个：

function clearInventoryFields()
{
    // Get the element by their class name
    var invFields = document.getElementsByClassName('inventory');

    for (var i = invFields.length-1; i >= 1 ; i--)
    {
      invFields[i].parentNode.removeChild(invFields[i]);
    }
}

示例：http://jsbin.com/AyazEl/1

Answer 3

尝试反过来

for (var i = invFields.length - 1; i > 0; i--)

见here。它按照您希望的方式工作。

从类中删除元素

3 个答案:

Working Fiddle