1

Добрый день! Хочу добавить по клику элемент li с данными а к нему кнопку после элемента (есть вторая часть задания, чтобы по клику удалить этот элемент). Что не получается, кнопка добавляется только после (до) последнего элемента, не получается добавить ее ко всем li.

Функция тут: https://github.com/Natanagar/addElement/blob/master/js/app.js

Это кусок функции, которая вставляет именно саму кнопку

    //create new Button with delete
let addNewButton = function(event){
let arrayBtn=[];
const newBtn = document.createElement('button');
newBtn.innerHTML = "Delete";
newBtn.classList.add("button");
console.log(newBtn);
//return newBtn;
const collectionList = [...document.querySelectorAll('li')];
console.dir(collectionList);
    for(let i = 0; i<collectionList.length; i++){
        console.log(collectionList[i]);
            collectionList[i].insertAdjacentElement("beforeEnd", newBtn);

    }
}
1
  • Спасибо, но все равно не вставляет кнопку, видимо трабл в общей функции( 10 окт 2017 в 9:09

1 ответ 1

1

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

function createDeleteBtn() {
  const newBtn = document.createElement('button');
  newBtn.innerHTML = "Delete";
  newBtn.classList.add("button");
  return newBtn;
}
const collectionList = [...document.querySelectorAll('li')];
for (let i = 0; i < collectionList.length; i++) {
  collectionList[i].insertAdjacentElement("beforeEnd", createDeleteBtn());

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.