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 将始终仅选择具有给定 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 函数。这意味着您在函数内所做的一切都仅限于该框。

Answer 4

您需要定义删除同一父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++;
}

仅删除父 div 内的 div

4 个答案: