Не могу понять как через js добавить кнопку к каждой новой li

Question

Не могу понять как через js добавить кнопку к каждой новой li. Попробовал создать новую переменную:

let btn = document.createElement('button');

После добавить ей новый класс, в котором уже заготовленный стили bbt.classList.add('btn-delete');

и добавил ее к списку. Но, ничего не работает. newTast.append(btnDelete);

Ссылка на codepen:

https://codepen.io/igor-solodownik/pen/oNZLZjE

const list = document.querySelector('.todo__list');
const form = document.querySelector('.todo__form');
const priority = document.querySelector('.form__btn-priority');
const input = document.querySelector('.form__input');
let btnDelete = document.querySelector('.btn-delete');



form.addEventListener('submit', function(evt) {
evt.preventDefault();
let newTast = document.createElement('li');
list.append(newTast);

let btn = document.createElement('button');
btn.classList.add('btn-delete');
list.append(btnDelete);

newTast.textContent = input.value;
input.value = '';
if (priority.classList.contains('important')) {
   newTast.classList.add('important');
}
});

priority.addEventListener("click", function() {
   priority.classList.toggle('important');
   if (priority.classList.contains('important')) {
      priority.textContent = "Важная задача";
   } else {
      priority.textContent = 'Обычная задача';
   }
});

Подскажите, пож как это реализовать. Картинка не отображается, но там крестик, делаю туду лист.

Answer 1

Проблема у вас была в строке newTast.textContent = input.value;.
Строка у вас располагалась после создания и внедрения кнопки Delete, поэтому TextContent вставлял текст в newTast перезаписывая всё внутри, а там уже была кнопка Delete.

Проще говоря, кнопку Delete нужно было вставлять уже после добавления текста таска.

Метод append() кстати, выполняет перенос, а не копирование, поэтому, ваша строка list.append(btnDelete); изначально выполняла перенос одной и той же кнопки из одного таска в другой.

const list = document.querySelector('.todo__list');
const form = document.querySelector('.todo__form');
const priority = document.querySelector('.form__btn-priority');
const input = document.querySelector('.form__input');
let btnDelete = document.querySelector('.btn-delete');

form.addEventListener('submit', function(evt) {
  evt.preventDefault();

  let newTast = document.createElement('li');
  newTast.textContent = input.value; // Этой строкой вы перезаписывали newTast с уже существующей там кнопкой.

  let btn = document.createElement('button');
  btn.classList.add('btn-delete');
  btn.textContent = 'Delete';
  newTast.append(btn);

  list.append(newTast);

  input.value = '';
  if (priority.classList.contains('important')) {
    newTast.classList.add('important');
  }
});

priority.addEventListener('click', function() {
  priority.classList.toggle('important');
  if (priority.classList.contains('important')) {
    priority.textContent = 'Важная задача';
  } else {
    priority.textContent = 'Обычная задача';
  }
});

* {
  box-sizing: border-box;
}

body {
  font-family: "Verdana", "Tahoma", sans-serif;
  font-style: 16px;
  padding: 0;
  margin: 0;
}

.todo {
  background-color: #F0F0F0;
  max-width: 800px;
  margin: 50px auto;
  padding-bottom: 20px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.30);
}

.todo__title {
  color: #fff;
  background-color: #18C8FF;
  padding: 11px 20px;
  margin: 0;
}

.form__input {
  width: 95%;
  height: 40px;
  display: block;
  margin: 0 auto;
  font-size: inherit;
  outline: none;
  padding: 0 10px;
  margin-bottom: 20px;
}

.form__btn-priority {
  display: block;
  position: relative;
  margin: 0 0 20px 20px;
  font-size: 18px;
  width: 210px;
  height: 40px;
  border: none;
  color: #18C8FF;
  cursor: pointer;
}

.form__btn-priority:hover {
  background-color: rgb(233, 235, 251);
}

.form__btn-priority::before {
  content: url('img/arrow1.png');
  position: absolute;
  left: 10px;
  top: 10px;
}

.form__btn-priority.important {
  color: #FFAD32;
  ;
}

.form__btn-priority.important::before {
  content: url('img/arrow2.png');
}

.form__btn-add {
  display: block;
  margin: 0 0 0 20px;
  font-size: 18px;
  width: 210px;
  height: 40px;
  border: none;
  background-color: #18C8FF;
  color: #fff;
  cursor: pointer;
}

.todo__list {
  counter-reset: myCounter;
  padding: 0;
  margin: 0 0 20px 0;
}

.todo__list li {
  color: #18C8FF;
  background-color: #fff;
  padding: 10px 10px;
  list-style: none;
  margin-bottom: 1px;
}

li.important {
  color: #fff;
  background-color: #FFAD32;
}

li.important::before {
  border: 1px solid #fff;
}

li::before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: inherit;
  border: 1px solid #18C8FF;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 30px;
  width: 30px;
  height: 30px;
}

.todo__list li {
  position: relative;
}

.btn-delete {
  position: absolute;
  top: 50%;
  left: 96%;
  transform: translate(-50%, -50%);
  background-color: inherit;
  border: none;
  cursor: pointer;
}

<div class="todo">
  <h1 class="todo__title">Список моих дел:</h1>


  <ol class="todo__list">
    <li>Задача 1
      <button type="button" class="btn-delete">
                    <img src="img/cross-mark.png" alt="delete" height="25px">
                </button>
    </li>
  </ol>




  <form class="todo__form" action="#">
    <input class="form__input" type="text" placeholder="Запишите новую задачу" required>
    <button class="form__btn-priority" type="button">Обычная задача</button>
    <button class="form__btn-add" type="submit">Добавить в список</button>
  </form>
</div>

БЛОГ НА HUSL

Не могу понять как через js добавить кнопку к каждой новой li

Ответы (1 шт):