我正在尝试创建一个普通的 javascript 待办事项应用程序。我不想使用 jquery，因为我不知道它是如何工作的；）我需要一个输入，可以填写任务，单击按钮添加任务，还需要一个按钮来清除输入字段。添加任务后，应该有一个带有“X”的按钮来删除该特定列表项。我不知道如何在 li 元素内创建按钮，单击时删除该 li 元素。const menu = document.getElementById("ul");function callThisOne() { var Task = document.getElementById("addToDo").value; menu.appendChild(Create(Task)); document.getElementById("addToDo").value = '';}function Create(name) { let listitem = document.createElement("li"); listitem.textContent = name; let deleteButton = document.createElement("button") deleteButton.onclick = function() { deleteButton.remove } let complete = deleteButton + listitem; return complete;}<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'><div id="divContainer"> <div id="Title"> <p>To-Do list</p> </div> <div id="divAddToDo"> <input id="addToDo" type="text" placeholder="Make a new task"><br> <input id="addButton" onclick="callThisOne()" type="button" value="Add!"> <button class="butong" onclick="document.getElementById('addToDo').value = ''">Clear</button> </div> <div id="list"> <ul id="ul"> <li>Dit is alleen om even te</li> <li>laten zien dat het werkt</li> </ul> </div></div>
3 回答
阿波罗的战车
TA贡献1862条经验 获得超6个赞
这就是委托的目的：
现在，在菜单中单击任何删除按钮都将删除其所在的 LI
我还删除了内联处理程序，因为这是推荐的
const menu = document.getElementById("ul");
function createTask(taskName) {
let listitem = document.createElement("li");
listitem.textContent = taskName;
let deleteButton = document.createElement("button")
deleteButton.textContent = 'Delete';
deleteButton.classList.add('delete')
deleteButton.style.marginLeft = '5px';
listitem.appendChild(deleteButton);
return listitem;
}
document.getElementById('addButton').addEventListener('click', function() {
var taskName = document.getElementById("addToDo").value;
if (taskName.trim() === "") return; // no need to add an empty task
menu.appendChild(createTask(taskName));
document.getElementById("clear").click();
})
document.getElementById('clear').addEventListener('click', function() {
document.getElementById('addToDo').select();
})
menu.addEventListener('click', function(e) {
const tgt = e.target;
if (tgt.classList.contains('delete')) tgt.closest('li').remove();
})
ul {
font-family: 'Montserrat', sans-serif;
font-weight: 100;
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<div id="divContainer">
<div id="Title">
<p>To-Do list</p>
</div>
<div id="divAddToDo">
<input id="addToDo" type="text" placeholder="Make a new task"><br>
<input id="addButton" type="button" value="Add!">
<button class="butong" id="clear">Clear</button>
</div>
<div id="list">
<ul id="ul">
<li>Dit is alleen om even te</li>
<li>laten zien dat het werkt</li>
</ul>
</div>
</div>
繁花不似锦
TA贡献1851条经验 获得超4个赞
您可以将删除按钮附加到列表项。
您可以
.remove在单击事件侦听器内调用列表项，因为您有对它的引用。
const menu = document.getElementById("ul");
function callThisOne() {
var Task = document.getElementById("addToDo").value;
menu.appendChild(Create(Task));
document.getElementById("addToDo").value = '';
}
function Create(name) {
let listitem = document.createElement("li");
listitem.textContent = name;
let deleteButton = document.createElement("button")
deleteButton.textContent = 'Delete';
deleteButton.style.marginLeft = '5px';
deleteButton.onclick = function() {
listitem.remove();
}
listitem.appendChild(deleteButton);
return listitem;
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<link href="ToDo.css" rel="stylesheet">
</head>
<body>
<div id="divContainer">
<div id="Title">
<p>To-Do list</p>
</div>
<div id="divAddToDo">
<input id="addToDo" type="text" placeholder="Make a new task"><br>
<input id="addButton" onclick="callThisOne()" type="button" value="Add!">
<button class="butong" onclick="document.getElementById('addToDo').value = ''">Clear</button>
</div>
<div id="list">
<ul id="ul">
<li>Dit is alleen om even te</li>
<li>laten zien dat het werkt</li>
</ul>
</div>
</div>
</body>
</html>
SMILET
TA贡献1796条经验 获得超4个赞
您所需要的只是动态创建的“X”按钮来查找最近的li祖先，这可以使用该方法完成.closest()，然后调用.remove()它。
其他：
您确实不应该使用内联 HTML 事件属性，例如onclick. 这是一种已有 25 多年历史的技术，用于设置事件，但它不会像应有的那样消亡，因为它很容易做到，而且大多数新程序员只是复制别人无意中使用它的代码。更不用说臭名昭著的 W3 Schools 网站仍然错误地提倡这种方法。相反，在 JavaScript 中进行所有事件绑定，而不是使用事件属性的其他非常古老的技术，例如，使用更强大的onclick现代技术。.addEventListener()
您可以在下面的代码中看到 HTML 是多么干净，因为除了 HTML 之外什么都没有。
const input = document.querySelector("input");
const list = document.querySelector("ul");
document.querySelector("button.clear").addEventListener("click", function(evt){
list.innerHTML = "";
});
document.querySelector("button").addEventListener("click", function(evt){
const item = document.createElement("li");
item.textContent = input.value;
input.value = "";
const delBtn = document.createElement("button");
delBtn.classList.add("delete");
delBtn.textContent = "X"
delBtn.addEventListener("click", function(evt){
// Find the nearest <li> ancestor element and remove it
this.closest("li").remove();
});
item.appendChild(delBtn);
list.appendChild(item);
});
.delete { font-weight:bold; margin-left:1em; }
<input><button>ADD</button>
<ul></ul>
<button class="clear">Clear</button>
添加回答
举报
0/150
提交
取消