如何在JavaScript事件上创建移除按钮

下面是我用来向待办事项列表添加元素的js代码

let addButton = document.getElementById('sub-btn');
let listContainer = document.getElementById('items');
let inputField = document.getElementById('sub');
let rmvButton= document.getElementById('rmv');

//adds items to list after clicking button
addButton.addEventListener('click', function(){
    var paragraph = document.createElement('p');
    paragraph.classList.add('paragraph-style')
    paragraph.innerText = inputField.value;
    listContainer.appendChild(paragraph);
    inputField.value = ''
})

---

可以使用与创建段落元素相同的方法创建按钮

//段落=。。。
// ...
const button=document.createElement（'按钮'）
button.innerText=“删除”
button.onclick=function（）{paragration.remove（）}
//向DOM添加按钮

确切的实现将取决于要删除的元素，但一般的想法是获取对DOM元素的引用，然后对其调用

.remove（）

。此示例删除列表中的最后一项（如果有）：

let addButton=document.getElementById（'sub-btn'）；
让listContainer=document.getElementById（'items'）；
让inputField=document.getElementById（'sub'）；
设rmvButton=document.getElementById（'rmv'）；
//单击按钮后将项目添加到列表中
addButton.addEventListener（'click'，function（）{
var段落=document.createElement（'p'）；
段落.classList.add（'段落样式'）
段落.innerText=inputField.value；
listContainer.appendChild（第段）；
inputField.value=“”
})
rmvButton.addEventListener（'click'，function（）{
const lastItem=listContainer.children[listContainer.children.length-1]；
if（lastItem）{lastItem.remove（）}
})

添加
删除

此操作将删除一个元素

var myobj = document.getElementById("demo");
myobj.remove();

---

您可以添加一个删除按钮，只需添加一个带有删除侦听器的按钮

const remove=document.createElement（'button'）；
remove.textContent='remove'；
remove.addEventListener（'click'，handleRemove）；

下面是一个典型的删除处理程序：

const handleRemove=e=>{
const item=e.target.closest（'.item'）；
item.parentElement.removeChild（项目）；
};

完整演示

const addButton=document.getElementById（'sub-btn'）；
const listContainer=document.getElementById（'items'）；
const inputField=document.getElementById（'sub'）；
const rmvButton=document.getElementById（'rmv'）；
常量handleRemove=e=>{
const item=e.target.closest（'.item'）；
//移除侦听器，以避免内存泄漏。
item.querySelector（“.remove btn”）
.removeEventListener（'click'，HandlerRemove）；
item.parentElement.removeChild（项目）；
};
//单击按钮后将项目添加到列表中
addButton.addEventListener（'click'，e=>{
const item=document.createElement（'div'）；
const段落=document.createElement（'div'）；
const remove=document.createElement（'button'）；
item.classList.add（'item'）；
段落.classList.add（“段落样式”）；
remove.classList.add（'remove-btn'）；
段落.textContent=inputField.value；
remove.textContent='remove'；
remove.addEventListener（'click'，handleRemove）；
项目.附加（第段）；
项目。追加（删除）；
listContainer.append（item）；
inputField.value=''；
})

.items{
显示器：flex；
}
.项目{
显示：网格；
网格自动流：列；
网格模板柱：1fr 6em；
栅柱间隙：1米；
边缘底部：0.667em；
对齐项目：居中；
}
.段落风格{
字体：斜体；
}

添加

请详细说明删除按钮的用途？否决投票的原因？如果你能告诉我你发现什么不太有用，我想改进答案。哦，我明白了，有人出于某种原因否决了所有答案。谢谢，我已经把CSS部分弄得很难了，这个答案帮了我很多忙@基瓦戈登听到这个消息很高兴。你真的很接近。正如我所指出的，在删除元素之前分离侦听器非常重要。这对于较小的应用程序并不重要，但从长远来看会影响更大的应用程序。我以前没有想过删除侦听器，如果我不这样做，它会对我的代码产生什么影响？@KivaGordon如果你无法分离侦听器，特别是如果你添加了上千个TODO，然后将它们全部删除。。。将有一千个功能挂出。类似于悬挂指针。清理它们的唯一方法是刷新页面。太多未使用的变量/函数会增加应用程序的内存使用。