在div中添加元素和按钮时，每个按钮如何将自身删除？

2024-05-18 • 问答

我有一个脚本，可以将段落添加到div中。这些段落中包含一些文本和一个删除按钮。此删除按钮应该能够删除包含其文本的段落（因此删除整个段落），但是不能删除。

var elementCounter2 = 0;

function addElement2() {
  elementCounter2++;
  var p = document.createElement("p");
  var node = document.createTextNode("This is element number " + elementCounter2);
  p.setattribute("id","p" + elementCounter2);
  p.appendChild(node);
  p.innerHTML += ' <button id="del' + elementCounter2 + '" onclick="deleteElement2();">Delete this element.</button>';
  document.getElementById("elements2").appendChild(p);
}

function deleteElement2() {
  var p = document.getElementById("p" + elementCounter2);
  var btn = document.getElementById("del" + elementCounter2);

  //Button sees its own id and look for the corresponding p id,then deletes the paragraph.
}

.borderful {
  border: solid 1px black;
  margin: 10px;
  padding: 10px;
}

<div class="borderful">
  <p>Here is the second part</p>
  <p>You can add elements here.</p>
  <p>You can delete these aswell but differntly.</p>
  <button onclick="addElement2();">Add an element.</button>
  <div id="elements2"></div>
</div>

您可以在每个新创建的段落上设置一个事件侦听器（取消内联代码），而不必担心计数器（此处保留以显示代码的工作原理）

var elementCounter2 = 0;

function addElement2() {
  elementCounter2++;
  var p = document.createElement("p");
  var node = document.createTextNode("This is element number " + elementCounter2);
  p.setAttribute("id","p" + elementCounter2);
  p.appendChild(node);
  p.innerHTML += ' <button>Delete this element.</button>';
  document.getElementById("elements2").appendChild(p);
  var el = document.getElementById("p" + elementCounter2);
  el.addEventListener("click",deleteElement2,false);
}

function deleteElement2() {
  this.remove()
}

.borderful {
  border: solid 1px black;
  margin: 10px;
  padding: 10px;
}

<div class="borderful">
  <p>Here is the second part</p>
  <p>You can add elements here.</p>
  <p>You can delete these aswell but differntly.</p>
  <button onclick="addElement2();">Add an element.</button>
  <div id="elements2"></div>
</div>

这应该有效

var elementCounter2 = 0;

function addElement2() {
  elementCounter2++;
  var p = document.createElement("p");
  var node = document.createTextNode("This is element number " + elementCounter2);
  p.setAttribute("id","p" + elementCounter2);
  p.appendChild(node);
  p.innerHTML += ' <button id="del' + elementCounter2 + '" onclick="deleteElement2(this);">Delete this element.</button>';
  document.getElementById("elements2").appendChild(p);
}

function deleteElement2(caller) { 
  // caller = button
  document.getElementById("del" + caller.id.substr(3)).parentNode.remove();
}

.borderful {
  border: solid 1px black;
  margin: 10px;
  padding: 10px;
}

<div class="borderful">
  <p>Here is the second part</p>
  <p>You can add elements here.</p>
  <p>You can delete these aswell but differntly.</p>
  <button onclick="addElement2();">Add an element.</button>
  <div id="elements2"></div>
</div>

一种简单的方法是将该段落称为父元素，而不用担心如何直接引用它。

    function deleteElement2() {
        this.parentElement.remove();
    }

但是，将按钮添加为

p.innerHTML += ' <button id="del'+ elementCounter2 +'" onclick="deleteElement2();">Delete this element.</button>';

这不是一个好习惯，因为您只能在Javascript中添加HTML元素，而是在Javascript中添加HTML元素。

要了解有关您的原始问题或如何在JS中执行此操作的更多信息，请参考CS50W在YouTube上的演讲所提供的非常相似的示例：https://youtu.be/ZRV7JCXAFTs?t=2486

在div中添加元素和按钮时，每个按钮如何将自身删除？

dcx6327 回答：在div中添加元素和按钮时，每个按钮如何将自身删除？

大家都在问