DOM等价于jQuery `.detach()`？
DOM等价于jQuery `.detach()`？
提问于 2018-02-05 15:42:46
我试图删除一个输入字段，点击一个“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节点。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-05 15:46:57
删除元素时，只要保留对其的引用，就可以将其放回。所以：
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错误.)。
Stack Overflow用户
发布于 2018-02-05 15:49:17
以函数形式分离元素：
function detatch(elem) {
return elem.parentElement.removeChild(elem);
}这将返回“分离”元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48626203
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号