jQuery中`.detach()`的DOM等效方法是什么？

Question

我正在尝试通过点击“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节点。

- иikolai

---

关于jQuery的.detach()方法：https://api.jquery.com/detach/ - Rory O'Kane

Answer 1

当你移除一个元素时，只要保留对它的引用，就可以将其放回。因此：

var input = /*...code to get the input element*/;
input.parentNode.removeChild(input); // Or on modern browsers: `input.remove();`

稍后如果您想将其放回

someParentElement.appendChild(input);

与jQuery不同的是，DOM不区分“remove”和“detach” — DOM操作始终等同于“detach”，这意味着如果您将元素添加回来，它仍然具有其处理程序：

实时示例：

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 错误...）。

- T.J. Crowder

Answer 2

要在函数形式中分离一个元素：

function detatch(elem) {
    return elem.parentElement.removeChild(elem);
}

这将返回“分离”的元素。

- scagood