remove only the div inside the parent div

Question

In this websites the user can add as much boxes as he wants, and every box contains a green and blue small boxes, the user should be able to click the blue box to remove the green box. the issue is that every time I click the blue box it doesn't remove the green box unless there is only one parent box is made. I have tried a lot of ways but nothing is working.

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

I think document.getElementById will always select the first element only with the given id. Therefore only the first lbox element in the dom keeps getting more and more eventlisteners attached to it, while the others won't get any. Make the id's of your elements unique by appending the count. That will make sure that every element gets it's eventlistener:

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 must, at all times, be unique per-document . Learn about this very basic here: https://www.w3schools.com/hTML/html_id.asp . Your code keeps readding the same id values over and over, making your HTML invalid and your code dysfunctional.

Here's a working code example that doesn't rely on ids to get the job done:

 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

If you have more than one parent box you need to iterate over each one. You need to do something like;

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

I haven't tested this, but the key part is the forEach function. This means everything you do inside the function is scoped to that box.

Answer 4

you need to define to delete the other box inside the same parent div. I would delete the id because the defenition in class is the same. I would also change the class names to something, wich makes visible what the green and what the blue box is. You can do following:

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