Event listener removing issue-CodePudding

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" >
    <div  ></div>
    <div  ></div>
    <div  ></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());
});

CodePudding user response：

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" >
  <div    ></div>
  <div  ></div>
  <div   ></div>
</div>

CodePudding user response：

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 if it was already clicked
  if (!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" >
  <div ></div>
  <div ></div>
  <div ></div>
</div>