如何使用 JavaScript 刪除已新增的清單項目？
- 王林轉載
- 2023-09-13 21:25:081200瀏覽
在 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 刪除已新增的清單項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！