在本网站中,用户可以添加任意数量的框,每个框包含一个绿色和蓝色的小框,用户应该可以点击蓝色框删除绿色框。问题是,每次我单击蓝色框时,它都不会删除绿色框,除非只制作了一个父框。我尝试了很多方法,但没有任何效果。
let count = 0;
function addBox() {
let box = `
<div class="box">
<div class="lbox" id="lbox">
</div>
<div class="rbox" id="rbox">
</div>
<h1>
${count}
</h1>
</div>
`
$(`#boxes`).append(box);
document.getElementById("lbox").addEventListener("click", function() {
rbox.remove();
})
count++;
}
答案 0 :(得分:0)
我认为 document.getElementById
将始终仅选择具有给定 id 的第一个元素。因此,只有 dom 中的第一个 lbox 元素不断获得越来越多的事件侦听器,而其他元素则不会。通过附加计数使元素的 id 唯一。这将确保每个元素都获得它的事件侦听器:
let count = 0;
function addBox() {
let box = `
<div class="box">
<div class="lbox" id="lbox${count}">
</div>
<div class="rbox" id="rbox${count}">
</div>
<h1>
${count}
</h1>
</div>
`;
$(`#boxes`).append(box);
document.getElementById("lbox" + count).addEventListener("click", function() {
$(".rbox" + count).remove();
})
count++;
}
答案 1 :(得分:0)
id
在任何时候,每个文档都必须是唯一的。在此处了解这个非常基本的信息:https://www.w3schools.com/hTML/html_id.asp。您的代码一遍又一遍地读取相同的 id 值,使您的 HTML 无效并且您的代码无法正常工作。
这是一个不依赖 id 来完成工作的工作代码示例:
let count = 0;
function addBox() {
let box = document.createElement('div');
box.className = 'box';
box.innerHTML = `
<div class="lbox">
</div>
<div class="rbox">
</div>
<h1>
${count}
</h1>`;
document.getElementById('boxes').appendChild(box);
box.querySelector('.lbox').addEventListener('click', function() {
box.querySelector('.rbox').remove();
})
count++;
}
.lbox, .rbox {
display: inline-block;
height: 40px;
width: 40px;
}
.lbox { background-color: blue; }
.rbox { background-color: green; }
<button onclick="addBox()">Add Box</button>
<div id="boxes"></div>
答案 2 :(得分:0)
如果您有多个父框,则需要迭代每一个。 你需要做类似的事情;
let boxes = document.querySelectorAll('.box');
boxes.forEach(function(box){
box.querySelector('lbox').addEventListener('click',function(){
box.remove();
});
})
我还没有测试过,但关键部分是 forEach 函数。这意味着您在函数内所做的一切都仅限于该框。
答案 3 :(得分:0)
您需要定义删除同一父div内的另一个框。 我会删除 id,因为类中的防御是相同的。 我还将类名更改为某些内容,从而使绿色框和蓝色框可见。 您可以执行以下操作:
let count = 0;
function addBox() {
let box = `
<div class="box_wrapper">
<div class="blue_box">
</div>
<div class="green_box">
</div>
<h1>
${count}
</h1>
</div>
`
$(`#boxes`).append(box);
$( ".blue_box" ).click(function() {
$(this).parent().find(".green_box").remove();
});
count++;
}