删除按钮删除目标项目之前的项目

首页课程实战体系课手记专栏慕课教程

删除按钮删除目标项目之前的项目

我一直在创建一个待办事项列表，每个条目有两个按钮，“完成”用于逐行完成的任务，“删除”用于删除它。当我删除第二个项目时，它会删除第一个项目而不是第二个项目。我怎样才能解决这个问题？谢谢。

这是 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.log(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";

}

javascripthtmlCSS

慕姐4208626

浏览 111回答 1

1回答

MMTTMM

您有更多具有相同 ID ( doneButn) 的元素 - 那么第一个元素将成为目标（ID 必须是唯一的）。使用函数参数告诉 JS 应该定位哪个元素。delBtn.setAttribute("onclick" , "done(this)");                                      ^^^^... function done(el){        //    ^^    let li = el.parentNode;        //   ^^    li.remove();}

0 0

随时随地看视频慕课网APP

相关分类

JavaScript