Question

我有一个删除按钮元素数组：

const DELETE_BUTTONS = document.getElementsByClassName('delete-button');

这些删除按钮位于表格中，每个按钮都位于自己td的表格行内。我以三种不同的方式为它添加一个事件监听器。

已经渲染删除按钮：

for (let x = 0; x < DELETE_BUTTONS.length; x++) {
    DELETE_BUTTONS[x].onclick = function () {
        deleteProperty(DELETE_BUTTONS[x]);
    };
}

到表格中的新行，这是我用另一个onclick添加的内联表单：

...
CLONED.classList.add('cloned', 'properties__row');
const DELETE_BUTTON = CLONED.lastElementChild.lastElementChild;
DELETE_BUTTON.onclick = function () {
    deleteProperty(DELETE_BUTTON);
};

当用户提交内联表单时，我使用Ajax返回数据，并创建一个新的tr并将其附加到表正文。（为了方便地创建这个元素，我使用另一个JS函数。请注意，我没有包含我创建tr本身的位，这是无关紧要的。）
```
MAKE_ELEMENT('a', {onclick: 'deleteProperty(this)', class: ['btn-flat', 'waves-effect', 'btn-floating']},
    MAKE_ELEMENT('i', ['material-icons', 'red-text'],
        'delete_forever'
    )
)
```

这是随onclick添加的功能：

function deleteProperty(element) {
    element.parentElement.parentElement.remove();
}

这很有效，直到我删除第二个元素。每次我删除一个元素，它也会从数组中删除它。这意味着deleteProperty(DELETE_BUTTONS[19])将删除/删除与最初不同的元素。如何防止阵列改变长度？

我试图复制数组，但它的行为与原始版本完全相同。我还可以在删除一个元素时在数组中插入一个空的占位符，使其保持相同的长度，但这似乎不是很好的做法。任何指针都会受到欢迎，谢谢。

使用.remove（）时保留原始元素数组

0 个答案: