Добавление кнопки удаления в список

Попытка добавить кнопку удаления в список дел с помощью манипулирования javascript DOM. Проблема в том, что я appendChild() в цикле for. Он только добавляет кнопку, которую я создал, к последнему элементу списка.

<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);
}

javascript arrays for-loop dom appendchild
person JC.    schedule 22.04.2020    source источник
comment
Разве вы не можете просто добавить встроенную кнопку в свой HTML?   -  person Adil Raza    schedule 23.04.2020
comment
@AdilRaza да, я мог бы, но список интерактивный, а не статичный. Таким образом, используя манипуляции с DOM, в конечном итоге автоматически создаются кнопки по мере того, как в список в браузере вводится больше элементов. Спасибо за вклад!   -  person JC.    schedule 23.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

Существует только одна кнопка, поэтому вы перемещаете ее с li на li, и она оказывается последней. Вы можете создавать новую кнопку на каждой итерации, чтобы все они получили кнопку удаления.

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);
}
person IrkenInvader    schedule 22.04.2020