我无法将事件侦听器添加到由 JS 创建的 li

Question

我无法将事件侦听器添加到由 JavaScript 创建的列表项。

我正在尝试向列表项添加一个事件侦听器，这样如果我双击任何列表项，它将从 DOM 中删除该特定列表项。

// Declaring Variables

let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
// Adding Function to Add New task  

function getVal() {
    let value = inputbtn.value;
    if (value === "") {
        alert("Please fill out this field.")
    }
    else {
        let newElement = document.createElement('li')
        let liText = document.createTextNode(value)
        newElement.appendChild(liText)
        list.appendChild(newElement)
    }
    document.myForm.reset()
}


// Removing Task by ___________

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-do List Trial</title>
    <link rel="stylesheet" href="Trial.css">
</head>
<body>
    <h3>To do list</h3>
    <form action="" name="myForm">
        <input type="text" id="input-but" required>
        <input type="button" id="add-button" value="Add Task">
        <ul id="text"></ul>
    </form>

    <!-- JavaScript Source -->
    <script src="Trial.js"></script>
</body>
</html>

Answer 1

这里是line 19newElement.ondblclick=(e)=>newElement.remove()

// Declaring Variables

let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
// Adding Function to Add New task  

function getVal() {
    let value = inputbtn.value;
    if (value === "") {
        alert("Please fill out this field.")
    }
    else {
        let newElement = document.createElement('li')
        let liText = document.createTextNode(value)
        newElement.appendChild(liText)
        list.appendChild(newElement)
        newElement.ondblclick=(e)=>newElement.remove()
    }
    document.myForm.reset()
}


// Removing Task by ___________

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-do List Trial</title>
    <link rel="stylesheet" href="Trial.css">
</head>
<body>
    <h3>To do list</h3>
    <form action="" name="myForm">
        <input type="text" id="input-but" required>
        <input type="button" id="add-button" value="Add Task">
        <ul id="text"></ul>
    </form>

    <!-- JavaScript Source -->
    <script src="Trial.js"></script>
</body>
</html>

Answer 2

您可以在附加到父项之前向 newElement 添加侦听器。

newElement.addEventListener('dblclick', () => newElement.remove());

// Declaring Variables

let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
// Adding Function to Add New task  

function getVal() {
    let value = inputbtn.value;
    if (value === "") {
        alert("Please fill out this field.")
    }
    else {
        let newElement = document.createElement('li')
        let liText = document.createTextNode(value)
        newElement.appendChild(liText)
        
        // Removing Task by ___________
        newElement.addEventListener('dblclick', () => newElement.remove());
        
        list.appendChild(newElement)
    }
    document.myForm.reset()
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-do List Trial</title>
    <link rel="stylesheet" href="Trial.css">
</head>
<body>
    <h3>To do list</h3>
    <form action="" name="myForm">
        <input type="text" id="input-but" required>
        <input type="button" id="add-button" value="Add Task">
        <ul id="text"></ul>
    </form>

    <!-- JavaScript Source -->
    <script src="Trial.js"></script>
</body>
</html>

但更简单的解决方案可能是使用 event delegation 并向父 ul 添加一个侦听器。

list.addEventListener('dblclick', (e) => {
  if (e.target.closest('li')) {
    e.target.closest('li').remove();
  }
})

// Declaring Variables

let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
// Adding Function to Add New task  

function getVal() {
    let value = inputbtn.value;
    if (value === "") {
        alert("Please fill out this field.")
    }
    else {
        let newElement = document.createElement('li')
        let liText = document.createTextNode(value)
        newElement.appendChild(liText)
        list.appendChild(newElement)
    }
    document.myForm.reset()
}


// Removing Task by ___________
list.addEventListener('dblclick', (e) => {
  if (e.target.closest('li')) {
    e.target.closest('li').remove();
  }
})

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-do List Trial</title>
    <link rel="stylesheet" href="Trial.css">
</head>
<body>
    <h3>To do list</h3>
    <form action="" name="myForm">
        <input type="text" id="input-but" required>
        <input type="button" id="add-button" value="Add Task">
        <ul id="text"></ul>
    </form>

    <!-- JavaScript Source -->
    <script src="Trial.js"></script>
</body>
</html>

Answer 3

不是向每个列表项添加侦听器，而是向 ul 元素添加 one 并使用 event delegation 来捕获 dblclick 事件冒泡 DOM.

let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)

list.addEventListener('dblclick', handleClick, false);

function handleClick(e) {
  if (e.target.nodeName === 'LI') {
    e.target.remove();
  }
}

function getVal() {
  let value = inputbtn.value;
  if (value === "") {
    alert("Please fill out this field.")
  } else {
    let newElement = document.createElement('li')
    let liText = document.createTextNode(value)
    newElement.appendChild(liText)
    list.appendChild(newElement)
  }
}

<h3>To do list</h3>
<input type="text" id="input-but" required>
<input type="button" id="add-button" value="Add Task">
<ul id="text"></ul>

Answer 4

在这种情况下event delegation可以来救援。创建一个侦听器函数并让该函数确定是否应执行某项操作。在文档级别为您希望侦听器处理的事件类型添加侦听器。

这里有一个片段可以玩。

See also

document.addEventListener(`click`, handle);
document.addEventListener(`dblclick`, handle);

function handle(evt) {
  if (evt.target.id === `add-button`) {
    const inp = document.querySelector(`#input-but`);
    const value = inp.value.trim();

    if (value) {
      inp.removeAttribute(`placeholder`);
      document.querySelector(`ul#text`)
        .insertAdjacentHTML(`beforeend`,
          `<li class="point">${value}</li>`);
      return inp.value = ``;
    }

    inp.value = ``;
    return inp.setAttribute(`placeholder`, `Hey, give me some text!`)
  }

  if (evt.type === `dblclick` && evt.target.closest(`li`)) {
    evt.preventDefault();
    evt.target.closest(`li`).remove();
  }
}

.point {
  cursor: pointer;
}

.point:hover::after {
  content: ' (double click to remove)';
  color: red;
}

<html lang="en">

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

<body>
  <h3>To do list</h3>
  <form action="" name="myForm">
    <input type="text" id="input-but" required>
    <input type="button" id="add-button" value="Add Task">
    <ul id="text"></ul>
  </form>

  <!-- JavaScript Source -->
  <script src="Trial.js"></script>
</body>

</html>

Answer 5

只需将事件侦听器添加到创建的列表项。

newElement.addEventListener("dblclick", function() {

  newElement.remove();

});

有效！

我无法将事件侦听器添加到由 JS 创建的 li

I am unable to add event listener to li which is created by JS

html

javascript

frontend