如何解决如果在 JavaScript 中单击子项,则删除父项
我在创建 TodoApp 时遇到了问题
如果我点击图标应该删除图标所在的位置。 我不能写一个函数,它上升到 span 然后到 li 并删除它。
const input = document.querySelector('input');
const list = document.querySelector('ul');
const reset = document.querySelector('.reset');
const addTask = (e) => {
if (e.keyCode === 13 && input.value.length != 0) {
let value = input.value;
const li = document.createElement('li');
const span = document.createElement('span');
const icon = document.createElement('i');
icon.classList.add('material-icons');
icon.textContent = "highlight_off";
span.appendChild(icon);
li.textContent = value;
// span.setAttribute("onclick",`deleteTask()`);
list.appendChild(li);
li.appendChild(span);
input.value = "";
}
}
const deleteTask = (e) => {
const element = e.target;
console.log(element);
element.currentTarget.parentNode.remove();
}
input.addEventListener('keydown',addTask);
list.addEventListener('click',deleteTask)
<div class="container">
<input type="text" placeholder="Type text and click 'enter'">
<ul>
// Here is created li
</ul>
<button class="reset">CLEAR</button>
</div>
解决方法
使用最近的
const input = document.querySelector('input');
const list = document.querySelector('ul');
const reset = document.querySelector('.reset');
const addTask = (e) => {
if (e.keyCode === 13 && input.value.length != 0) {
let value = input.value;
const li = document.createElement('li');
const span = document.createElement('span');
const icon = document.createElement('i');
icon.classList.add('material-icons');
icon.textContent = "highlight_off";
span.appendChild(icon);
li.textContent = value;
// span.setAttribute("onclick",`deleteTask()`);
list.appendChild(li);
li.appendChild(span);
input.value = "";
}
}
const deleteTask = (e) => {
const element = e.target.closest("li");
console.log(element);
element.remove();
}
input.addEventListener('keydown',addTask);
list.addEventListener('click',deleteTask)
<div class="container">
<input type="text" placeholder="Type text and click 'enter'">
<ul>
// Here is created li
</ul>
<button class="reset">CLEAR</button>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。