資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 刪除新增的列表項？
在 HTML 中，開發人員可以使用“ul”標籤建立專案列表。我們可以將所有相關專案新增到單個列表中。我們還可以使用 JavaScript 管理列表項。
有時，開發人員需要使用 JavaScript 新增或刪除列表項。我們可以使用特定的屬性值訪問列表項，並使用 removechild() 方法刪除列表項。
在本教程中，我們將獲取使用者的輸入，並根據該值刪除列表項。
語法
使用者可以按照以下語法使用 javaScript 刪除新增的列表項
var item = document.getElementById(ID); list.removeChild(item);
在上述語法中，我們使用 id 訪問了列表項。之後，我們使用 removechild() 方法從列表中刪除選定的列表項。
示例 1（從列表中刪除動態元素）
在下面的示例中，我們建立了一個 id 等於“cars”的列表。此外，我們建立了輸入框以獲取使用者的列表項值。此外，我們建立了“新增汽車”和“刪除汽車”按鈕，當用戶點選相應按鈕時，這些按鈕將呼叫 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。
在第二個示例中，我們僅從列表中刪除最後一個子元素；在第三個示例中，我們一起刪除所有列表項。
6K+ 次檢視
