我有一个删除按钮元素数组:
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])
将删除/删除与最初不同的元素。如何防止阵列改变长度?
我试图复制数组,但它的行为与原始版本完全相同。我还可以在删除一个元素时在数组中插入一个空的占位符,使其保持相同的长度,但这似乎不是很好的做法。任何指针都会受到欢迎,谢谢。