CODEWITHSUNDEEP
javascript
Riantori
Riantori

Reputation: 317

How to clone element and attach a unique new child node in javascript

I make clone function and text counter which is it should contain a new number attach in every new box that i clone, my code below clone the element but the new element always refers to the number from the first source and also the counter always write the new number in the first box, the first box always write number from 1 to the latest counter number. is it possible to done it with javascript only? I really appreciate your help. 

var container = document.querySelector(".container");
var deleteBtn = document.querySelector(".delete");
var box = document.querySelector(".box");
var counter = 0;

container.addEventListener('click', function({target}) {
  if (target.nodeName = 'BUTTON' && target.classList.contains('cloneBtn')) {
    counter ++;
    var text = document.createTextNode(counter);
    
    box.appendChild(text);
    const clone = target.parentNode.cloneNode(true);
    container.appendChild(clone);
  }
   
  if(target.nodeName = 'BUTTON' && target.classList.contains('deleteBtn')) {
    target.parentNode.remove(target)
  }
})
.container {
  border: 1px solid black;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="container">
    <div class="box">
      <button class="cloneBtn">Clone</button>
      <button class="deleteBtn">Delete</button>
    </div>
  </div>
</body>
</html>

Upvotes: 0

Views: 1539

Answers (2)

codtex
codtex

Reputation: 6548

If I understood correctly, the problem is that you append the counter value always to the initial .box element, you would like to append it to the cloned element instead, so you will see the new counter value in the cloned element:

var container = document.querySelector(".container");
var deleteBtn = document.querySelector(".delete");
var box = document.querySelector(".box");
var counter = 0;

container.addEventListener('click', function({target}) {
  if (target.nodeName = 'BUTTON' && target.classList.contains('cloneBtn')) {
    counter++;
    var text = document.createTextNode(counter);
    // box.appendChild(text);  <---- WRONG
    const clone = box.cloneNode(true); // <-- Here clone the initial box instead target to avoid stacking of text nodes
    clone.appendChild(text);
  //^^^^^^^^^^^^^^^^^ here append to the cloned element 
    container.appendChild(clone);
  }
   
  if(target.nodeName = 'BUTTON' && target.classList.contains('deleteBtn')) {
    target.parentNode.remove(target)
  }
})
.container {
  border: 1px solid black;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="container">
    <div class="box">
      <button class="cloneBtn">Clone</button>
      <button class="deleteBtn">Delete</button>
    </div>
  </div>
</body>
</html>

Upvotes: 2

Francesco G.
Francesco G.

Reputation: 164

There're a lot of logic errors in your code: you append text before cloning, that's why the displayed sequence is wrong. Also you select by class but all the cloned boxes will have the same class and the result is a mess. I'd suggest using ID's and append the counter to the ID of the newly created/cloned elements. And, eventually, use delegate to hook the same event to multiple elements.

Upvotes: 0

Related Questions