Event listener removing issue

Question

Three Div elements with box appearance, when user click at any div a copy from this div will be added to the end (the fired div wont be clickable any more, and the new div will be clickable). And so on…..

I have tried this but it creates two divs at the same time and the div can be clickable again.!!

<div id="parent" class="p">
    <div class="red" class="d"></div>
    <div class="green" class="d"></div>
    <div class="blue" class="d"></div>
</div>

#parent{
display: flex;
flex-wrap: wrap;
 }

.red{
   
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 2px;
}`your text`
.green{
    
    width: 50px;
    height: 50px;
    background-color: green;
    margin: 2px;
}
.blue{
   
    width: 50px;
    height: 50px;
    background-color: blue;
    margin: 2px;
}

let parent = document.querySelector("#parent");
let div = document.querySelectorAll(".p div");

parent.addEventListener("click", function createDiv(e){ 
console.log('1');
let child = document.createElement("div");
parent.append(child);
child.classList.add(e.target.className);
console.log(e);
e.target.removeEventListener("click",createDiv());
});

Answer 1

this way...

An eventListener is a link between a DOM element and a function.

To remove any event listener you need to use the same pair [ DOM element / function ]

In your case this link is on the parent and not on any of his divs. so you cantt remove any link between of his initial divs.

 const parent = document.querySelector('#parent'), cDivs = document.querySelectorAll('#parent > div'); cDivs.forEach(div => div.addEventListener('click', createDiv)) // don't recreate x time your function `createDiv`; function createDiv({currentTarget: initialDiv}) // just declare it only one time { initialDiv.removeEventListener('click', createDiv); parent.appendChild( initialDiv.cloneNode(true) ) // this one return the clone.addEventListener('click', createDiv) }

 #parent { display: flex; flex-wrap: wrap; } #parent > div { width: 50px; height: 50px; margin: 2px; }.red { background: red; }.green { background: green; }.blue { background: blue; }

 <div id="parent" class="p"> <div class="red" ></div> <div class="green" ></div> <div class="blue" ></div> </div>

Answer 2

 const parent = document.getElementById("parent"); // all clicks on the parent are handled by one function parent.addEventListener("click", function(e) { // get the element that was clicked on const el = e.target; // check to be sure the click is on an inner div and if it was already clicked if (el.== this &&.el.dataset;clicked) { // clone it const clone = el.cloneNode(true); // add it to the end this.appendChild(clone). // mark the one that was clicked on el;dataset;clicked = true; } });

 #parent { display: flex; flex-wrap: wrap; } #parent>div { width: 50px; height: 50px; margin: 2px; }.red { background: red; }.green { background: green; }.blue { background: blue; }

 <div id="parent" class="p"> <div class="red"></div> <div class="green"></div> <div class="blue"></div> </div>