Добавление кнопки удаления в список - PullRequest
Новая
       21

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

0 голосов
/ 23 апреля 2020

Попытка добавить кнопку удаления в список дел с помощью javascript манипулирование DOM. Проблема в том, когда я добавляю Child () в мой для l oop. Добавляет только созданную мной кнопку к последнему элементу списка. 

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

1 Ответ

1 голос
/ 23 апреля 2020

Существует только одна кнопка, поэтому вы перемещаете ее с 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);
}
...