Add a button element to each list element

Question

I want to add button element to each list element (JavaScript).

This is my code. I used fro loop. In the output, only the last element of the list is getting the button element. What am I doing wrong.

function createButtonElement() {
    var btn = document.createElement("button");   `

   btn.appendChild(document.createTextNode("Delete Me"));
   var a = document.querySelectorAll("li");

   for(var v =0; v<a.length;v++)
    {
      a[v].appendChild(btn);
    }   
}

You need to create a different button for each li element and don't forget to give it a click event listener inside that loop as well as an id or some dataset info in order to differenciate each button — Mouradif
– Mouradif, Commented Jul 18, 2019 at 15:26

Mister Jojo · Accepted Answer · 2019-07-19 13:57:30Z

You created only one button and append it on the first <LI>, then you append it to the second <LI>... as he can't be on two different place this command move your button to the second place, and so on.

to duplicate élent you have to use the cloneNode method : https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

sample code :

const MyList     = document.querySelector('#My-List')
  ,   AddButtons = document.querySelector('#Add-Buttons')

AddButtons.onclick=_=>
{
  let newBt = document.createElement('button')
  newBt.textContent = 'Delete Me'
  document.querySelectorAll("#My-List li").forEach(eLI=>eLI.appendChild( newBt.cloneNode(true)) )
}

MyList.onclick=e=>
{
  if (e.target.tagName.toLowerCase() !='button') return
  let pLI = e.target.parentElement
  MyList.removeChild(pLI)
}

<button id="Add-Buttons">Add Buttons to each element on list</button>

<ul id="My-List">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

PLUS I added the way to deal with the click on the added buttons, via the event delegation

esqew · Accepted Answer · 2019-07-18 15:23:51Z

This behavior is documented in Node.appendChild() on MDN:

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

Instead, instantiate a new button for each li within your loop:

function createButtonElement() {
  var a = document.querySelectorAll("li");

  for (var v = 0; v < a.length; v++) {
    var btn = document.createElement("button");

    btn.appendChild(document.createTextNode("Delete Me"));
    a[v].appendChild(btn);
  }
}

<li>a</li>
<li>b</li>
<li>c</li>
<button onclick="createButtonElement()">Click</button>

Matt Ellen · Accepted Answer · 2019-07-18 15:23:18Z

0

You need to create a new button for each item, otherwise the button just moves from item to item until you get to the last one.

function createButtonElement() {
   var a = document.querySelectorAll("li");

   for(var v =0; v<a.length;v++)
   {
      let btn = document.createElement("button");   
      btn.appendChild(document.createTextNode("Delete Me"));
      a[v].appendChild(btn);
   }   
}

<button onclick="createButtonElement()">click</button>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

answered Jul 18, 2019 at 15:23

Matt Ellen

11.6k5 gold badges74 silver badges94 bronze badges

Comments

Cosmin Staicu · Accepted Answer · 2019-07-18 15:24:29Z

0

You need to create the button for each li element

function createButtonElement() {
  var a = document.querySelectorAll("li");
  for(var v =0; v<a.length;v++) {
    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode("Delete Me"));
    a[v].appendChild(btn);
  }   
}

answered Jul 18, 2019 at 15:24

Cosmin Staicu

1,9472 gold badges26 silver badges29 bronze badges

Collectives™ on Stack Overflow

Add a button element to each list element

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related