首頁猿問在我現有的 html 列表中使用...

在我現有的 html 列表中使用 javascript 添加刪除按鈕

JavaScript

慕沐林林 2022-10-21 11:07:49

我想在 javascript 中添加一個函數，該函數在添加到我的列表中的新項目旁邊添加一個刪除按鈕，我還希望刪除按鈕出現在我在 html 中創建的現有列表項旁邊，當我按下刪除時按鈕它會刪除列表中的該項目。HTML<!DOCTYPE html><html><head> <title>Javascript + DOM</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <h1>Shopping List</h1> <p id="first">Get it done today</p> <input id="userinput" type="text" placeholder="enter items"> <button id="enter">Enter</button> <ul> <li class="bold red" random="23">Notebook</li> <li>Jello</li> <li>Spinach</li> <li>Rice</li> <li>Birthday Cake</li> <li>Candles</li> </ul> <script type="text/javascript" src="script.js"></script></body></html>JSvar button = document.getElementById("enter");var input = document.getElementById("userinput");var ul = document.querySelector("ul");function inputLength() { return input.value.length;}function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = "";}function addListAfterClick() { if (inputLength() > 0) { createListElement(); }}function addListAfterKeypress(event) { if (inputLength() > 0 && event.keyCode === 13) { createListElement(); }}button.addEventListener("click", addListAfterClick);input.addEventListener("keypress", addListAfterKeypress);

查看完整描述

2 回答

侃侃無極

TA貢獻2051條經驗獲得超10個贊

var button = document.getElementById("enter");

var input = document.getElementById("userinput");

var ul = document.querySelector("ul");

var shoppingListItems = ["Notebook", "Jello", "Spinach", "Rice", "Birthday Cake", "Candles"]

function inputLength() {

return input.value.length;

}

function createListElement(text, index) {

var li = document.createElement("li");

var deleteBtn = document.createElement("button");

deleteBtn.itemId = index

deleteBtn.onclick = deleteItem.bind(null, index)

deleteBtn.appendChild(document.createTextNode("Delete"))

li.appendChild(document.createTextNode(text));

li.appendChild(deleteBtn);

ul.appendChild(li);

}

function addListAfterClick() {

if (inputLength() > 0) {

shoppingListItems.push(input.value)

createListElement(input.value, shoppingListItems.length - 1);

}

function addListAfterKeypress(event) {

if (inputLength() > 0 && event.keyCode === 13) {

shoppingListItems.push(input.value)

createListElement(input.value, shoppingListItems.length - 1);

}

function deleteItem(itemId) {

var itemXpath = "//li[text()='"+shoppingListItems[itemId]+ "']";

var item = document.evaluate(itemXpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

item.remove();

}

function initPage() {

shoppingListItems.forEach(function(element, index) {

createListElement(element, index)

})

}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

window.onload = initPage;

<!DOCTYPE html>

<html>

<head>

<title>Javascript + DOM</title>

</head>

<body>

<h1>Shopping List</h1>

<p id="first">Get it done today</p>

<button id="enter">Enter</button>

</body>

</html>

反對回復 2022-10-21

繁星點點滴滴

TA貢獻1803條經驗獲得超3個贊

你可以這樣做：

HTML：

<ul>

<li class="bold red" random="23">Notebook</li>

<li id=li1>Jello <input id='btn1' type="submit" value='-'></input></li>

<li>Spinach</li>

<li>Birthday Cake</li>

<li>Candles</li>

</ul>

Javascript：

var btn = document.getElementById('btn1');

btn.onclick = function () {

document.getElementById('li1').remove();

this.remove();

};

你可以玩這個例子：

https://jsfiddle.net/be4psyrL/

反對回復 2022-10-21

2 回答
0 關注
209 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在我現有的 html 列表中使用 javascript 添加刪除按鈕

在我現有的 html 列表中使用 javascript 添加刪除按鈕

2 回答

添加回答