使用 Javascript 删除和创建具有相同 id 的 HTML 元素答案

【问题标题】：Removing and creating HTML elements with same id using Javascript使用 Javascript 删除和创建具有相同 id 的 HTML 元素
【发布时间】：2018-11-02 19:36:13
【问题描述】：

我有一个按钮，按下时会执行类似的操作

function click(){
  element = document.getElementById("element");
  
  element.parentNode.removeChild(element);
  var newelement = document.createElement("div");
  body.appendChild(newelement);
  newelement.id = "element";
}

我也尝试过使用element.outerHTML = "" 而不是removeChild，但没有成功。在添加关于删除前一个 id 为“element”的元素之前，第一次单击时一切正常，一个名为“element”的 div 被附加到正文中。（当然，在第二次单击时，附加了另一个名为“element”的元素，我想保持一个元素的唯一 ID。）现在，关于删除以前的元素，我的 button.onClick 甚至都没有任何东西。

另一个重要的上下文：我正在尝试对使用用户输入生成的元素执行此操作，因此无法保证制作了多少这些东西——我只是希望在用户想要生成时删除它们更多。

在第一次点击时，我试图删除一个空元素。这会破坏什么吗？

【问题讨论】：

控制台有错误吗？ getElementById 函数是否找到了该元素？你看到它在你的 DOM 检查器中被删除了吗？
所以检查它是否存在，但我确信控制台会告诉你问题是什么......
如果有多个这样的元素，可能应该使用一个类作为选择器。 Id 对于页面上的单个元素应该是唯一的。当您删除该元素时，任何对它的绑定或引用也可能会丢失。
@Tank，这是个好主意，谢谢。所以我的控制台说以 null 的 parentNode 为目标是行不通的。我想我可以在那里抛出一个 if 语句来处理没有这些元素在起作用的情况？我想我希望有一个更强大的解决方案，如果有的话......另外，是的，我在发布后进行了调试，因为我把我的编译器和我的调试器混淆了（我是新的，哈哈）。
我用你所拥有的东西创建了一个 jsfiddle。它将 div 替换为新的。这是预期的行为吗？ jsfiddle.net/woppyLov

标签： javascript html

【解决方案1】：

body 在您提供的范围内不存在，会引发异常。我会尝试：

var body = document.querySelector("body");

使用您的代码查看此示例：

https://jsfiddle.net/k0wL4y7p/2/

还要确保在所有局部变量上使用var，这样它们就不会被全局声明。请参阅下文以了解变量范围：

When to use var in Javascript

【讨论】：

我只是使用“body”作为填充符，因为我的实际代码包含一些难看的 var 名称。代码的问题是引用空元素的 parentNode 不起作用，所以我必须首先检查我试图删除的元素是否为空。 “element.remove()”是“element.parentNode.removeChild(element)”的更简洁版本吗？

【解决方案2】：

这个怎么样...不要删除父元素（Div1）；而是删除孩子。然后，创建子元素并将其附加到父元素。注意：您必须对其进行迭代以删除所有子节点并为 p 元素 id p1/p2 生成动态 id 或在需要时使用类。

你的 JS：

$(document).ready(function() {
  $("#btn1").click(function() {
    var element = document.getElementById("div1");
    while (element.firstChild) {
      element.removeChild(element.firstChild);
    }
    var para = document.createElement("p");
    var node = document.createTextNode("New element after click.");
    para.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(para);
  });
});

我更喜欢 JQuery - 没有循环

$(document).ready(function(){
    $("#btn1").click(function(){
       $("#div1").empty();
       $("#div1").append(" <p>Appended element after click</p>");
    });

});

你的 HTML

<body>
  <div id="div1">
    <p id="p1">Paragraph element before click.</p>
    <p id="p2">Another paragraph beofre click.</p>
  </div>


  <button id="btn1">Remove </button>

</body>

希望对你有帮助。

【讨论】：