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 元素但我一直失敗我嘗試了多種方法無法弄清楚
uj5u.com熱心網友回復：
我想這就是你要找的。
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>uj5u.com熱心網友回復：
一個簡單的方法是：
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 = '';
}
uj5u.com熱心網友回復：
首先，您不應該對多個元素使用相同的 id。您正在為每個 li 元素分配“item”的 id。因此，當您嘗試按 id 洗掉元素時，它將無法按預期作業。
為每個 li 元素分配一個唯一的 id（您也可以使用唯一的類或自定義參考。但讓我們使用 id）。
<li id="some_unique_id">todo </li>
我認為我們將不得不在按鈕上使用類和自定義資料屬性來實作我們想要的。
前任：<button 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"
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 = "";
}
我沒有測驗過這個。但這是您情況的最佳方法。
編輯：萊昂納多的上述答案更簡單、容易、快捷。試試看。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/495673.html
標籤：javascript html css dom
上一篇：jquery/javascript輸入復選框選中屬性（只讀不作業）
下一篇：如何在dom中設定值？