在 HTML 中，開發(fā)人員可以使用“ul”標(biāo)簽來創(chuàng)建項(xiàng)目列表。我們可以將所有相關(guān)項(xiàng)目添加到單個(gè)列表中。我們還可以使用 JavaScript 來管理列表項(xiàng)。
有時(shí)，開發(fā)人員需要使用 JavaScript 添加或刪除列表項(xiàng)。我們可以使用特定的屬性值訪問列表項(xiàng)，并使用removechild()方法刪除列表項(xiàng)。
在本教程中，我們將從用戶那里獲取輸入，并根據(jù)值刪除列表項(xiàng)。
語法
用戶可以按照以下語法使用javaScript刪除添加的列表項(xiàng)
var item = document.getElementById(ID); list.removeChild(item);
登錄后復(fù)制
在上面的語法中，我們使用 id 訪問列表項(xiàng)。之后，我們使用removechild()方法從列表中刪除選定的列表項(xiàng)。
示例1（從列表中刪除動態(tài)元素）
在下面的示例中，我們創(chuàng)建了 id 等于“汽車”的列表。此外，我們還創(chuàng)建了輸入框來從用戶那里獲取列表項(xiàng)的值。此外，我們還創(chuàng)建了添加汽車和刪除汽車按鈕，當(dāng)用戶單擊相應(yīng)按鈕時(shí)，該按鈕會調(diào)用 addCar() 和 removeCar() 函數(shù)。
在 JavaScript 中，我們訪問列表和文本輸入值。在addCar()函數(shù)中，我們首先創(chuàng)建列表項(xiàng)，然后設(shè)置列表項(xiàng)的id。接下來，我們創(chuàng)建一個(gè)文本節(jié)點(diǎn)，將其附加到列表項(xiàng)，然后使用appendchild()方法將列表項(xiàng)附加到列表。
<html>
<body>
<h2> Removing the <i> dynamic list items </i> from the list using JavaScript</h2>
<ul id = "cars">
</ul>
<input type = "text" id = "carName" />
<button onclick = "addCar()"> Add car </button>
<button onclick = "removeCar()"> Remove car </button>
<script>
var carList = document.getElementById("cars");
var carName = document.getElementById("carName");
function addCar() {
var li = document.createElement("li");
li.setAttribute('id', carName.value);
let text = document.createTextNode(carName.value);
li.appendChild(text);
carList.appendChild(li);
}
function removeCar() {
var item = document.getElementById(carName.value);
carList.removeChild(item);
}
</script>
</html>
登錄后復(fù)制
示例 2（從列表中刪除最后一個(gè)元素）
在下面的示例中，我們使用 JavaScript 從列表中刪除最后一個(gè)列表項(xiàng)。此示例與第一個(gè)示例非常相似，但不同之處在于我們刪除了本示例中的最后一個(gè)列表項(xiàng)以及第一個(gè)示例中的動態(tài)列表項(xiàng)。
在removeCar()函數(shù)中，我們使用‘lastElementChild’屬性來獲取列表的最后一個(gè)子元素。之后，我們刪除最后一個(gè)元素（如果存在）。
在輸出中，用戶可以將多個(gè)項(xiàng)目添加到列表中，然后單擊刪除按鈕來刪除列表元素。
<html>
<body>
<h2> Removing the <i> last list item </i> from the list using JavaScript </h2>
<ul id = "cars">
</ul>
<input type = "text" id = "carName" />
<button onclick = "addCar()"> Add car </button>
<button onclick = "removeCar()"> Remove last car </button>
<script>
var carList = document.getElementById("cars");
var carName = document.getElementById("carName");
function addCar() {
var li = document.createElement("li");
li.setAttribute('id', carName.value);
let text = document.createTextNode(carName.value);
li.appendChild(text);
carList.appendChild(li);
}
// function to remove the last element from the list
function removeCar() {
// select the last element
var lastElement = carList.lastElementChild;
// if the last element is present, then remove it
if (lastElement) {
carList.removeChild(lastElement);
}
}
</script>
</html>
登錄后復(fù)制
示例 3
在下面的示例中，我們使用 JavaScript 刪除所有列表項(xiàng)。在這里，我們創(chuàng)建了項(xiàng)目列表。
在 JavaScript 中，我們定義了 addItem() 函數(shù)來添加項(xiàng)目，并定義了clearAll() 函數(shù)來從列表中刪除所有項(xiàng)目。在clearAll()函數(shù)中，我們使用“firstchild”屬性來獲取列表的第一個(gè)子級，并使用removechild()方法來刪除該子級。我們使用 while 循環(huán)進(jìn)行迭代，直到刪除列表的所有子項(xiàng)。
在輸出中，用戶可以按全部清除按鈕從列表中刪除所有項(xiàng)目。
<html>
<body>
<h2> Removing the <i> all last list items </i> from the list using JavaScript</h2>
<ul id = "itmes">
</ul>
<input type = "text" id = "itemValue" />
<button onclick = "addItems()"> Add itmes </button>
<button onclick = "clearAll()"> clear list </button>
<script>
var items = document.getElementById("itmes");
var itemValue = document.getElementById("itemValue");
function addItems() {
var li = document.createElement("li");
li.setAttribute('id', itemValue.value);
let text = document.createTextNode(itemValue.value);
li.appendChild(text);
items.appendChild(li);
}
// function to clear all the list items
function clearAll() {
while (items.firstChild) {
items.removeChild(items.firstChild);
}
}
</script>
</html>
登錄后復(fù)制
結(jié)論
用戶學(xué)會了從列表中刪除動態(tài)項(xiàng)目。基本方法是每個(gè)列表項(xiàng)都應(yīng)該有一個(gè)唯一的標(biāo)識符來訪問和刪除動態(tài)列表項(xiàng)并將其刪除。在這里，我們使用列表項(xiàng)值作為標(biāo)識符本身的 id。
在第二個(gè)示例中，我們僅從列表中刪除最后一個(gè)子元素；在第三個(gè)示例中，我們一起刪除所有列表項(xiàng)。
以上就是如何使用 JavaScript 刪除已添加的列表項(xiàng)？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
