我正在尝试通过单击“X 按钮”来删除输入字段。删除后,提交表单时不会发布其值。出现一个“+ 按钮”,允许用户再次添加所述输入。输入有一个打开日历的 onclick
事件,重新附加后,日历不再在点击时打开。我不会使用 jQuery。
adderBtn.onclick = function (e) {
var elem = that.hiddenElems.shift();
that.collectionItemContainer.append(elem);
}
removerBtn.onclick = function (e) {
collectionItemElem.remove();
that.hiddenElems.push(collectionItemElem);
}
问题是如何在不丢失事件的情况下移除和重新附加 DOM 节点。
最佳答案
当你删除一个元素时,只要你保留对它的引用,你就可以把它放回去。所以:
var input = /*...code to get the input element*/;
input.parentNode.removeChild(input); // Or on modern browsers: `input.remove();`
以后如果你想把它放回去
someParentElement.appendChild(input);
与 jQuery 不同,DOM 不区分“删除”和“分离”——DOM 操作始终等同于“分离”,这意味着如果您将元素添加回去,它仍然有其处理程序:
实例:
var input = document.querySelector("input[type=text]");
input.addEventListener("input", function() {
console.log("input event: " + this.value);
});
input.focus();
var parent = input.parentNode;
document.querySelector("input[type=button]").addEventListener("click", function() {
if (input.parentNode) {
// Remove it
parent.removeChild(input);
} else {
// Put it back
parent.appendChild(input);
}
});
<form>
<div>
Type in the input to see events from it
</div>
<label>
Input:
<input type="text">
</label>
<div>
<input type="button" value="Toggle Field">
</div>
</form>
如果您删除该元素而不保留对它的任何引用,则它有资格进行垃圾回收,附加到它的任何处理程序也是如此(前提是没有其他引用它们,并在这方面忽略一些历史性的 IE 错误......) .
关于javascript - DOM 相当于 jQuery `.detach()` ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48626203/