Adding a delete button to a list

Question

Trying to add a delete button to a to do list using javascript DOM manipulation. The problem is when I appendChild() in my for loop. It only appends the button I created to the last list item.

<div id="list">
    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li>Jello</li> 
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
</div>

var item = document.querySelectorAll("li");
var button = document.createElement("button");
var buttonText = document.createTextNode("delete");
button.appendChild(buttonText);
for (var i = 0; i < item.length; i++) {
    item[i].appendChild(button);
}

@AdilRaza yeah I could, but the list is interactive and not static. So using DOM manipulation to eventually create buttons automatically as more items are entered into the list on the browser. Thank you for the input though! — JC.
– JC., Commented Apr 23, 2020 at 1:15

IrkenInvader · Accepted Answer · 2020-04-22 21:53:10Z

1

Only one button exists so you are moving it from li to li and it ends up in the last one. You can create a new button each iteration so they all get a delete button.

var item = document.querySelectorAll("li");

for (var i = 0; i < item.length; i++) {
    var button = document.createElement("button");
    var buttonText = document.createTextNode("delete");
    button.appendChild(buttonText);
    item[i].appendChild(button);
}

answered Apr 22, 2020 at 21:53

IrkenInvader

4,0401 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding a delete button to a list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related