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

28 浏览
0 Comments

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

我有一个按钮，当按下时，会执行类似以下代码的操作：\n

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

\n我还尝试使用`element.outerHTML = \"\"`代替`removeChild`，但没有成功。在添加删除具有id为\"element\"的先前元素的部分之前，第一次点击时一切正常，并且一个名为\"element\"的div被附加到body中。（当然，在第二次点击时，另一个名为\"element\"的元素被附加，我希望保持id唯一。）现在，有关删除先前元素的部分，我的按钮的onClick甚至什么都没做。\n另一个重要的上下文：我试图为使用用户输入生成的元素做这个操作，所以无法保证有多少个这些元素--我只想在用户想要生成更多元素时将它们删除。\n在第一次点击时，我试图移除一个空元素。这会造成问题吗？

0

2 答案

0 Comments

在这个问题中，出现的原因是在JavaScript中尝试通过相同的id删除和创建HTML元素。这是一个问题，因为id应该是唯一的，不能同时用于多个元素。

解决这个问题的方法是，不要删除父元素（Div1），而是删除子元素。然后，创建一个新的子元素并将其添加到父元素中。需要注意的是，必须使用迭代来删除所有的子节点，并且对于p元素的id p1/p2，要么生成动态id，要么使用class。

以下是使用纯JavaScript的解决方法：

$(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>

希望这可以帮到你。

0
0 Comments

问题的原因是在所提供的范围内，body不存在，会抛出异常。解决方法是使用var body = document.querySelector("body");。以下是使用您的代码的示例：https://jsfiddle.net/k0wL4y7p/2/。还要确保在所有局部变量上使用var，以便它们不会被全局声明。请参阅下面的内容了解变量作用域的相关知识：When to use var in Javascript。我只是用"body"作为填充，因为我的真实代码包含一些难看的变量名。代码的问题在于引用一个空元素的父节点是行不通的，所以我必须先检查我要删除的元素是否为空。"element.remove()"是"element.parentNode.removeChild(element)"的更简洁版本吗？

0