如何删除待办事项列表中的事件监听器？

如何解决如何删除待办事项列表中的事件监听器？

我在做一个基本的待办事项列表项目时遇到了这个问题，当没有文本登录时，我单击按钮将输入字段中插入的文本添加到列表本身，并添加了“删除”按钮，当您单击添加按钮时，我将分配给每个“ LI（列表元素）”。

所以基本上，我想知道当输入字段中没有内容时如何阻止此“删除”按钮的外观（如果用户未记录任何内容，但如果他单击添加，则会出现删除按钮）。

希望我的解释很好，您可以帮助我！这是代码（有些词是西班牙语，但希望您能理解）：

const contenido = document.getElementById("meter")
const lista = document.getElementById("list")
const boton = document.getElementById("boton")

boton.addEventListener("click",() =>{
let itemList = document.createElement("LI")
let itemListClass = itemList.classList.add("ItemListClass")
let itemButton = document.createElement("input")
    itemButton.type = "button"

lista.appendChild(itemList)
itemList.textContent = contenido.value

itemList.appendChild(itemButton)
itemButton.value = "Delete"

if(itemList){contenido.value=null
    }

itemButton.addEventListener("click",()=>{
    lista.removeChild(itemList)
})


})

解决方法

因此，我猜测如果文本框中没有文本，则您想要的是您不希望用户能够单击按钮来添加它。您可以仅使用CSS删除它

#meter:invalid ~ #boton { visibility: hidden }

<label for="meter">Note: </label>
<input type=text" id="meter" required><button type="button" id="boton">Add</button>
<div id="list"></div>

或者使用JavaScript可以将其禁用

const meter = document.querySelector("#meter");
const boton = document.querySelector("#boton");

const checkState = function () {
  const isDisabled = meter.value.trim().length === 0;
  boton.disabled = isDisabled;
};

meter.addEventListener("input",checkState);
checkState();

<label for="meter">Note: </label>
<input type=text" id="meter" required><button type="button" id="boton">Add</button>