如何从我的列表中删除某些元素 Javascript html

Question

HTML

<!DOCTYPE html>
<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>ToDo</title>
</head>
<body>
<h1>To Do List</h1>
<label>Enter What You Have To Do:</label>
<br>
<br>
<input type="text" id="toDo">
<br>
<br>
<button type="button" id="myButton">Submit</button>
<button type="button" id="clearList">Clear List</button>
<br>
<ul id="list"></ul>


<script src="todojs.js"></script>
</body>
</html>

JAVASCRIPT

document.getElementById('myButton').onclick = function () {
const doIt = document.getElementById('toDo').value;
const li = '<li id="item">' + doIt + '<button type="button" id="clearOne">X</button>' + '</li>';
document.getElementById('list').insertAdjacentHTML('beforeend', li);
document.getElementById('toDo').value = '';
document.getElementById('clearList').onclick = function() {
    const ul = document.getElementById('list');
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
}
document.getElementById('clearOne').onclick = function () {
    const currentLi = document.getElementById('item');
    currentLi.removeChild();
}

}

所以我在每个要做的事情旁边放了一个 X，我希望能够在用户按下 X 时删除一个 LI 元素但我一直失败我尝试了多种方法无法弄清楚

Answer 1

我想这就是你要找的。

 document.getElementById('myButton').onclick = function () { const doIt = document.getElementById('toDo').value; // create li element. const li = document.createElement('li'); li.innerText = doIt; // create remove button. const removeButton = document.createElement('button'); // Set text of remove button removeButton.innerText = 'X'; // Add event listener for the remove button. removeButton.addEventListener('click', function() { this.parentNode.remove() } ) // append the button inside the li element li.append(removeButton); // prepend the li element in the list. document.getElementById('list').prepend(li); document.getElementById('toDo').value = ''; document.getElementById('clearList').onclick = function() { const ul = document.getElementById('list'); ul.innerHTML = ''; } }

 <!DOCTYPE html> <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>ToDo</title> </head> <body> <h1>To Do List</h1> <label>Enter What You Have To Do:</label> <br> <br> <input type="text" id="toDo"> <br> <br> <button type="button" id="myButton">Submit</button> <button type="button" id="clearList">Clear List</button> <br> <ul id="list"></ul> <script src="todojs.js"></script> </body> </html>

Answer 2

一个简单的方法是：

function remove(el) {
  el.parentElement.remove();
}

document.getElementById('myButton').onclick = function () {
    const doIt = document.getElementById('toDo').value;
    const li = '<li id="item">' + doIt + '<button type="button" onClick="remove(this)" id="clearOne">X</button>' + '</li>';
    document.getElementById('list').insertAdjacentHTML('beforeend', li);
    document.getElementById('toDo').value = '';
}

Answer 3

首先，您不应该对多个元素使用相同的 id。 您正在为每个 li 元素分配“item”的 id。 因此，当您尝试按 id 删除元素时，它将无法按预期工作。

为每个 li 元素分配一个唯一的 id（您也可以使用唯一的类或自定义引用。但让我们使用 id）。

<li id="some_unique_id">todo </li>

我认为我们将不得不在按钮上使用类和自定义数据属性来实现我们想要的。

例如： <button class="removeBtn" data-todoid="_the_corresponding_todo_id_">Remove</button>

这里我们使用 data-todoid 属性值来识别当我们点击它时哪个 li 元素会被移除。

现在让我们修改您的代码。

document.getElementById('myButton').onclick = function () {

  // as we need some string or number to use as a unique id,
  // its better to use the current timestamp in milliseconds in here.
  const thiselementuniqueid = (new Date().getTime()).toString();
  const doIt = document.getElementById('toDo').value;
  const li = '<li id="todoitem_"+thiselementuniqueid >' + doIt + '<button type="button" 
              class="clearBtn" data-todoid="todoitem_"+thiselementuniqueid >X</button>' + '</li>';
  
  document.getElementById('list').insertAdjacentHTML('beforeend', li);
  
  document.getElementById('toDo').value = '';

  // get all the li remove buttons
  var clearButtons = getElementsByClassName('clearBtn'); 
  
  // write on click event action for all of them
  for(var a = 0; a<clearButtons.lenth;a++){
    var asinglebutton = clearButtons[a]; // selected a button
    
    
    asinglebutton.onClick = function(){
     let todoid = $(this).data("todoid"); // get matching todo id to be removed on click
     let currentLi = document.getElementById(todoid);
     currentLi.removeChild();

    }
  }     

  document.getElementById('clearList').onclick = function() {
    const ul = document.getElementById('list');
    ul.innerHtml = "";
}

我没有测试过这个。 但这是您情况的最佳方法。

编辑：莱昂纳多的上述答案更简单、容易、快捷。 试试看。

如何从我的列表中删除某些元素 Javascript html

问题描述

3 个解决方案

解决方案1
0 2022-06-21 18:08:08

解决方案2
0 2022-06-21 18:10:27

解决方案3
0 2022-06-21 18:38:12

如何从我的列表中删除某些元素 Javascript html

问题描述

3 个解决方案

解决方案1 0 2022-06-21 18:08:08

解决方案2 0 2022-06-21 18:10:27

解决方案3 0 2022-06-21 18:38:12

解决方案1
0 2022-06-21 18:08:08

解决方案2
0 2022-06-21 18:10:27

解决方案3
0 2022-06-21 18:38:12