在 HTML 中，開發人員可以使用“ul”標簽來創建項目列表。我們可以將所有相關項目添加到單個列表中。我們還可以使用 JavaScript 來管理列表項。
有時，開發人員需要使用 JavaScript 添加或刪除列表項。我們可以使用特定的屬性值訪問列表項，并使用removechild()方法刪除列表項。
在本教程中，我們將從用戶那里獲取輸入，并根據值刪除列表項。
語法
用戶可以按照以下語法使用javaScript刪除添加的列表項
var item = document.getElementById(ID); list.removeChild(item);
登錄后復制
在上面的語法中，我們使用 id 訪問列表項。之后，我們使用removechild()方法從列表中刪除選定的列表項。
示例1（從列表中刪除動態元素）
在下面的示例中，我們創建了 id 等于“汽車”的列表。此外，我們還創建了輸入框來從用戶那里獲取列表項的值。此外，我們還創建了添加汽車和刪除汽車按鈕，當用戶單擊相應按鈕時，該按鈕會調用 addCar() 和 removeCar() 函數。
在 JavaScript 中，我們訪問列表和文本輸入值。在addCar()函數中，我們首先創建列表項，然后設置列表項的id。接下來，我們創建一個文本節點，將其附加到列表項，然后使用appendchild()方法將列表項附加到列表。
<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>
登錄后復制
示例 2（從列表中刪除最后一個元素）
在下面的示例中，我們使用 JavaScript 從列表中刪除最后一個列表項。此示例與第一個示例非常相似，但不同之處在于我們刪除了本示例中的最后一個列表項以及第一個示例中的動態列表項。
在removeCar()函數中，我們使用‘lastElementChild’屬性來獲取列表的最后一個子元素。之后，我們刪除最后一個元素（如果存在）。
在輸出中，用戶可以將多個項目添加到列表中，然后單擊刪除按鈕來刪除列表元素。
<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>
登錄后復制
示例 3
在下面的示例中，我們使用 JavaScript 刪除所有列表項。在這里，我們創建了項目列表。
在 JavaScript 中，我們定義了 addItem() 函數來添加項目，并定義了clearAll() 函數來從列表中刪除所有項目。在clearAll()函數中，我們使用“firstchild”屬性來獲取列表的第一個子級，并使用removechild()方法來刪除該子級。我們使用 while 循環進行迭代，直到刪除列表的所有子項。
在輸出中，用戶可以按全部清除按鈕從列表中刪除所有項目。
<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>
登錄后復制
結論
用戶學會了從列表中刪除動態項目。基本方法是每個列表項都應該有一個唯一的標識符來訪問和刪除動態列表項并將其刪除。在這里，我們使用列表項值作為標識符本身的 id。
在第二個示例中，我們僅從列表中刪除最后一個子元素；在第三個示例中，我們一起刪除所有列表項。
以上就是如何使用 JavaScript 刪除已添加的列表項？的詳細內容，更多請關注www.92cms.cn其它相關文章！
