Javascript 如何使按钮显示在列表项旁边？

我正在用Javascript制作一个基本的待办事项列表应用程序。我可以输入列表元素，但是我在列表元素旁边的“删除”按钮上遇到了问题，也无法让该按钮删除列表中的项目

函数todoList（）{ var item=document.getElementById（“todoInput”）.value var text=document.createTextNode（项） var newItem=document.createElement（“li”） newItem.appendChild（文本） document.getElementById（“todoList”）.appendChild（newItem） var remove=document.createElement（'button'）； remove.classList.add（'remove'）； remove.innerHTML=“X”； remove.addEventListener（'click'，（）=>this.remove（todoInput））； }

任务名称：
添加任务

我添加了一些东西

1-将元素更改为input，然后将其类型设置为button

2-将按钮附加到子列表

函数todoList（）{ var item=document.getElementById（“todoInput”）.value var text=document.createTextNode（项） var newItem=document.createElement（“li”） newItem.appendChild（文本） document.getElementById（“todoList”）.appendChild（newItem）； var remove=document.createElement（'input'）；//元素为input remove.type=“button”//type是button或您想要的任何类型 remove.classList.add（'remove'）； remove.innerHTML=“X”； remove.addEventListener（'click'，（）=>this.remove（todoInput））； newItem.append（remove）； }

。删除{
左边距：7px；
}

答复
TaskApp
版本0.1
任务名称：
添加任务

您根本不会将新创建的

remove

按钮元素附加到DOM中。如果在将

newItem

附加到DOM之前，应该将其附加为

newItem

的子项

另外，如果您想让remove按钮删除条目，只需在其回调中调用

newItem.remove（）

。由于变量是函数作用域，每个删除按钮都将“记住”它应该删除的

元素。无需遍历父DOM树即可确定要删除的节点：

函数todoList（）{ const item=document.getElementById（“todoInput”）.value； const text=document.createTextNode（项）； const newItem=document.createElement（“li”）； newItem.appendChild（文本）； //创建按钮 const remove=document.createElement（'button'）； remove.classList.add（'remove'）； remove.innerHTML=“X”； remove.addEventListener（'click'，（）=>newItem.remove（））； //确保还将其附加到新的“

”元素！ newItem.appendChild（删除）； document.getElementById（“todoList”）.appendChild（newItem） }

任务名称：
添加任务

我对您的代码做了两个主要调整。首先，我将remove按钮添加到新创建的

li

，然后，我重写了它的click处理程序以删除它的父元素：

函数todoList（）{ var item=document.getElementById（“todoInput”）.value var text=document.createTextNode（项） var newItem=document.createElement（“li”） var remove=document.createElement（'button'）； remove.classList.add（'remove'）； remove.innerHTML=“X”； remove.addEventListener（'click'，（{target}）=>target.parentElement.remove（））； newItem.appendChild（文本） newItem.appendChild（删除） document.getElementById（“todoList”）.appendChild（newItem） }

任务名称：
添加任务

您在html/css或js中对此有问题吗？请将其附加到列表项中