Кнопка «Удалить» удаляет элемент перед целевым элементом

Я создавал список дел, и в нем есть две кнопки для каждой записи: «Готово», чтобы пролистывать завершенные задачи, и «Удалить», чтобы удалить его. И когда я удаляю второй элемент, он удаляет первый вместо второго. Как я могу это исправить? Спасибо.

Вот HTML

<body>
<header>
    <h1>To Do List</h1>
    <div class = "addItems">
        <input type = "text" name = "text" id = "addThis" onfocus = "this.value=''">
        <input type = "button" value = "Add" id = "addBtn">
    </div>
</header>

<section class = "checkList">
    <ul class = "list"></ul>
    
</section>

Вот JS

addButton.addEventListener('click' , add);

function add(){
    let input = document.getElementById('addThis').value;
    let newLi = document.createElement('li');
    newLi.id = "listNewItem";
    newLi.style.listStyleType = "none";
    newLi.style.backgroundColor = "#f4f4f4";
    newLi.style.padding = "10px";
    newLi.style.marginBottom = "10px";
    newLi.appendChild(document.createTextNode(input));
    let deleteBtn = document.createElement('button')
    console.info(newLi);
    let list = document.querySelector('.list');
    list.insertBefore(newLi, list.childNodes[2]);

    let delBtn = document.createElement('button');
    delBtn.id = "doneButn";
    delBtn.className = "delete";
    delBtn.setAttribute("onclick" , "done()");
    delBtn.appendChild(document.createTextNode("Remove"));
    newLi.appendChild(delBtn);

    let doneSubBtn = document.createElement('button');
    doneSubBtn.id = "alreadyDone";
    doneSubBtn.className = "done";  
    doneSubBtn.setAttribute("onclick" , "finished()");
    doneSubBtn.appendChild(document.createTextNode("Done"));
    newLi.appendChild(doneSubBtn);
}

function done(){
        let del = document.getElementById('doneButn');
        let li = del.parentNode;
        li.remove();
}

function finished(){
    let liText = document.getElementById('alreadyDone').parentNode;
    liText.style.textDecoration = "line-through";
}

javascript html css

11.12.2020 14:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

254

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас есть несколько элементов с одинаковым идентификатором (doneButn) — тогда целевым является первый элемент (идентификатор должен быть уникальным).

Используйте параметр функции, чтобы сообщить JS, какой элемент должен быть целевым.

delBtn.setAttribute("onclick" , "done(this)");
                                      ^^^^
... 
function done(el){
        //    ^^
    let li = el.parentNode;
        //   ^^
    li.remove();
}

11.12.2020 14:36

Другие вопросы по теме

Может ли кто-нибудь объяснить мне, почему моя переменная «сумма» не вычисляет сумму массива «arrPrice»?

Выравнивание результатов поиска под панелью поиска

Как с помощью CSS сделать линию фокусировки невидимой?

Замена ввода в поле поиска событием onclick не обновляет список

Как пересоздать таблицу по кнопке с помощью HTML?

Magick CSS, который по-разному применяется к каждому символу строки

Как сделать рамку частью сетки HTML и занять ширину родительского div?

Перенаправление с красивого URL-адреса на URL-адрес .html

Как получить значение CITY из файла javascript с помощью GET или POST в форме HTML [КОД ПРИКЛАДЕН]?

Добавьте несколько разных изображений в PDF с помощью jsPDF

Кнопка «Удалить» удаляет элемент перед целевым элементом

Ответы 1

Другие вопросы по теме

Похожие вопросы