Question

我有一个按钮，当按下时，执行类似

的按钮

＆＃13;

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

＆＃13;

我还尝试使用element.outerHTML = ""代替removeChild但没有成功。在添加关于使用id＆＃34;元素＆＃34;删除前一个元素的位之前第一次点击时，一切都运行正常，一个名为＆＃34;元素＆＃34;附在身上。（当然，在第二次单击时，另一个名为＆＃34;元素＆＃34;的元素被追加，我想保持id对一个元素唯一。）现在，关于删除前面的元素，我的按钮.onClick什么都不做。

另一个重要的上下文：我试图对使用用户输入生成的元素执行此操作，因此无法保证这些内容中有多少 - 我只是希望它们被删除当用户想要生成更多的时候。

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

Answer 1

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

var body = document.querySelector（＆＃34; body＆＃34;）;

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

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

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

When to use var in Javascript

Answer 2

这个怎么样...不要删除父元素（Div1）;而是删除孩子。然后，创建子项并将其附加到父元素。注意：您必须迭代它以删除所有子节点＆amp; for p element 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>

希望它有所帮助。

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

2 个答案: