仅删除父 div 中的 div

Question

在这个网站中用户可以添加任意数量的盒子，每个盒子包含一个绿色和蓝色的小盒子，用户应该可以点击蓝色盒子来移除绿色盒子。 问题是每次我单击蓝色框时它都不会删除绿色框，除非只有一个父框。 我尝试了很多方法，但没有任何效果。

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++;
}

Answer 1

我认为document.getElementById将始终 select 仅具有给定 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++;
}

Answer 2

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>

Answer 3

如果您有多个父框，则需要遍历每个父框。 你需要做类似的事情；

let boxes = document.querySelectorAll('.box');
boxes.forEach(function(box){
box.querySelector('lbox').addEventListener('click',function(){
box.remove();
});
})

这个我没测试过，但是关键部分是forEach function。 这意味着您在 function 内所做的一切都在该框内。

Answer 4

您需要定义删除同一父 div 内的另一个框。 我会删除 id，因为 class 中的定义是相同的。 我还将 class 名称更改为某个名称，这样可以看到绿色和蓝色框是什么。 您可以执行以下操作：

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++;
}