我有一个可以将段落添加到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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句