javascript - 如何添加一个EventListener，以便在点击后删除一个li？

转载作者：行者123 更新时间：2023-12-01 00:10:18

25

4

这是我到目前为止的代码:

const list = document.getElementById("list")
const enter = document.getElementById("enter")

enter.addEventListener("click", add => {
  var input = document.getElementById("form").value
  var node = document.createElement("LI")
  var text = document.createTextNode(input)
  node.appendChild(text)
  list.appendChild(node)
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>To-Do:</h1>
  <ul id="list">
    <li>Hello</li>
    <li>This is</li>
    <li>A test</li>
  </ul>
  <div class="input">
    <input id="form" type="text"></input>
    <button id="enter">Add</button>
  </div>

  <script src="app.js"></script>
</body>

</html>

当我单击添加按钮时，我已经能够添加列表元素，但我不知道如何向每个单独的 li 元素添加 EventListener。

最佳答案

你能做的是:

将一个事件绑定(bind)到容器(列表)
确保点击的元素(目标)是您想要的元素(例如 LI)
remove() 该元素(如果有)

这可以通过以下方式完成:

document.querySelector('#list').addEventListener('click', function({target}) {
  if (target.matches('li'))
    target.remove()
}, false);

工作示例

const list = document.getElementById("list")
const enter = document.getElementById("enter")

enter.addEventListener("click", add => {
  var input = document.getElementById("form").value
  var node = document.createElement("li")
  var text = document.createTextNode(input)
  node.appendChild(text)
  list.appendChild(node)
})


document.querySelector('#list').addEventListener('click', function({target}) {
  if (target.matches('li'))
    target.remove()
}, false);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>To-Do:</h1>
  <ul id="list">
    <li>Hello</li>
    <li>This is</li>
    <li>A test</li>
  </ul>
  <div class="input">
    <input id="form" type="text" />
    <button id="enter">Add</button>
  </div>

  <script src="app.js"></script>
</body>

</html>

关于javascript - 如何添加一个EventListener，以便在点击后删除一个li？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60123485/

25

4

0

文章推荐： javascript - 尝试使用类来保持我的代码干净 - 不起作用

文章推荐： python - 在 Python 中取消嵌套/规范化 JSON

文章推荐： javascript - 单击 iframe 中的元素 - Selenium Python

javascript - 如果使用 vanilla Javascript 触发另一个 EventListener，我如何返回或使所有其他 EventListener 为空
我想要完成的是一段代码，当单击其中一个按钮时，该按钮将获得下面列出的样式，而所有其他按钮样式将返回 null。我假设它涉及一个 bool 语句，但也许我错了。您将在下面看到我试图使用我的“else
javascript - 将 eventListener 添加到具有相同类名但不同 id 的 div 会覆盖以前的 eventListener
我在我的 javascript 文件中的 for 循环中创建了一堆 div。它们具有相同的类名但不同的 ID。我通过 for 循环添加了一个事件监听器，但我之前的分配被覆盖了，现在所有的 div 都
多个对象上的javascript eventlistener
我为一些创建了一个 EventListener元素，现在我想更改此特定元素的子元素的不透明度，以更改此特定元素上的 EventListener 是否为真。我如何用 jQuery 或 Javascr
javascript - 移除类中定义的 EventListener
我正在尝试删除一个 eventListener，但看起来我错过了什么。为什么下面的代码不起作用，它没有从按钮中删除事件监听器。我也试过绑定(bind)这个来传递作用域，但是也没用 class Te
Spring @EventListener 注释不起作用
我想在一个类中处理多个事件，这是我的示例: @Lazy(false) @Component public class EventListenerImpl { @EventListener
symfony - EventListener 更新其他实体并死循环
在我的应用程序中，我有“用户”。一个用户可以有多个“账户” 我的“帐户”实体上有一个监听器。它在“service.yml”文件中声明如下: account_listener: class: A
CQRS - EventListener 可以调用命令吗？
我想在我的项目中使用 CQRS 模式的元素。我想知道我是否用命令和事件做对了。我不确定的是事件是否可以调用命令。为了更好地展示我想要做什么，我将使用图表和示例。这是一个例子: 用户调用 TripC
Javascript eventlistener 需要单击两次才能正常工作
所以当我点击“hartje”部分时，我正在触发一个功能。该函数正在获取名称为“food-option”的所有类。如果我点击函数触发器，它应该给“数据最喜欢的”一个值。它确实给了它一个值，但问题是我必须
javascript - eventListener 内的代码没有立即调用？
我试图理解这段代码，但它没有任何意义。当点击#open_help按钮时，他正在调用handleOpen()，它调用showHelp()，它调用jQuery函数来显示帮助div，但如果您在下面看到他正在
javascript - 在每次迭代时以索引作为参数的循环中添加 EventListener
使用 JavaScript 创建表格时，我正在尝试在循环中设置事件监听器。每次迭代中的事件监听器应调用相同的函数，但以当前索引作为参数。我在这里发现我可以将闭包与函数数组一起使用，但我必须使用数组吗？
javascript - EventListener 不适用于克隆
这个问题已经有答案了: Javascript infamous Loop issue? [duplicate] (5 个回答) 已关闭 7 年前。 http://jsfiddle.net/1wqdmo
javascript - 无法从函数内部删除 eventListener
我调用一个函数，其中包含“if/else”语句，该函数根据作为参数传递的 bool 值添加或删除监听器。我的问题是我无法通过调用相同的函数来删除先前添加的监听器我缺少什么？ function li
javascript - 禁用点击 EventListener
我正在尝试学习 HTML5 Canvas 。在出现吃 cookies 的猫 gif 之前，第一张图片需要点击七次。最初，我将 click EventListener 绑定(bind)到图像。出现吃 c
javascript - 如何正确删除 eventListener？
我很喜欢普通的 JS 井字游戏每个单元格都是一个按钮。为了处理点击，我将 eventListener 添加到包装 div: board.addEventListener("click", handle
javascript - 为每个复选框添加一个 eventListener
我正在寻找一种简洁明了的方法来向我的每个复选框添加事件监听器，而不必重复我的 Javascript 代码，当涉及到 JS 时，我仍然不知所措，所以任何帮助都会非常有用赞赏。这是我目前所拥有的
javascript - EventListener 存储在哪里？
大家好。有人知道我们使用 addEventListener 方法时事件存储在哪里吗？？？示例: window.addEventListener('mousedown', this.myvar.onCl
javascript - 焦点改变的 EventListener？
有没有一种方法可以将事件监听器添加到输入，其中焦点从 onfocus 变为 off focus 基本上我使用 key up 为我的输入框分配了一个事件监听器，然后调用我的服务器来检查用户名是否已经在数
javascript - 表单的无效 eventListener
我正在 try catch 表单的 invalid 事件，但它似乎没有发生？ https://codepen.io/MartinMuzatko/pen/VzWwxG?editors=1010 对于我的
javascript - 单击时未删除 eventListener
我试图在单击 Canvas 元素时删除 eventListener: document.getElementById("canvas") .addEventListener("clic
javascript - 在循环中分配 EventListener
我使用这行代码向通过 forloop 创建的 div 添加事件监听器: for(var i in mail){ //create div parent.addEventListener("

首页

博学

6Ren·AI

商城

javascript - 如何添加一个EventListener，以便在点击后删除一个li？

工作示例