我正在学习JavaScript，这是我的一个实践场景。
我已经有了一个克隆内容的按钮，而在那个被克隆的内容内，有一个删除它的按钮。
当我单击提示您移除内容的按钮时，它将移除第一组内容。
我想要发生的是，当你点击提示你移除内容的按钮时，它移除的是与那个按钮相关的内容，而不是其他内容。
这是CodePen链接。
https://codepen.io/josephchunta/pen/yzwwgvq
这是密码。
HTML
<div id="placeToStoreContent">
</div>
<button id="orderContent" onclick="addContent()">Add Content</button>
<div class="contentThatShouldBeHidden">
<div id="newContent">
<div id="content">
<p class="thisIsContent">This is a prompt</p>
<button onclick="removeContent()">Remove this</button>
<hr />
</div>
</div>
</div>
CSS
.contentThatShouldBeHidden { display: none; }
JavaScript
function addContent() {
var itm = document.getElementById("newContent");
var cln = itm.cloneNode(true);
document.getElementById("placeToStoreContent").appendChild(cln);
}
function removeContent() {
var x = document.getElementById("content").parentNode.remove();
}
// This is for debug purposes to see which content is which
document.getElementById('orderContent')
.addEventListener('click', function(e) {
const orderedNumber = document.querySelectorAll('.thisIsContent');
let i = 1;
for (p of orderedNumber) {
p.innerText = '' + (i++);
}
});
在“删除”按钮中，执行以下操作:
<!-- The "this" keyword is a reference to the button element itself -->
<button onclick="removeContent(this)">Remove this</button>
在JavaScript中:
function removeContent(element) {
element.parentNode.remove();
}
当您尝试按ID删除时，它将使用它找到的第一个ID。
要删除正确的内容，请发送此onclick。
<button onclick="removeContent(this)">Remove this</button>
并在您的函数中处理它:
function removeContent(el) {
el.parentNode.remove();
}
示例:
null
function addContent() {
var itm = document.getElementById("newContent");
var cln = itm.cloneNode(true);
document.getElementById("placeToStoreContent").appendChild(cln);
}
function removeContent(el) {
el.parentNode.remove();
}
// This is for debug purposes to see which content is which
document.getElementById('orderContent')
.addEventListener('click', function(e) {
const orderedNumber = document.querySelectorAll('.thisIsContent');
let i = 1;
for (p of orderedNumber) {
p.innerText = '' + (i++);
}
});.contentThatShouldBeHidden { display: none; }<div id="placeToStoreContent">
</div>
<button id="orderContent" onclick="addContent()">Add Content</button>
<div class="contentThatShouldBeHidden">
<div id="newContent">
<div id="content">
<p class="thisIsContent">This is a prompt</p>
<button onclick="removeContent(this)">Remove this</button>
<hr />
</div>
</div>
</div>