add and delete to a list by html javascrip code example

Example 1: add and delete to a list by html javascrip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamically add/remove items from list - JavaScript</title>
</head>
<body>

    <ul id="dynamic-list"></ul>

    <input type="text" id="candidate"/>
    <button onclick="addItem()">add item</button>
    <button onclick="removeItem()">remove item</button>

    <script src="script.js"></script>
</body>
</html>

Example 2: add and delete to a list by html javascrip

function addItem(){
    var ul = document.getElementById("dynamic-list");
    var candidate = document.getElementById("candidate");
    var li = document.createElement("li");
    li.setAttribute('id',candidate.value);
    li.appendChild(document.createTextNode(candidate.value));
    ul.appendChild(li);
}

function removeItem(){
    var ul = document.getElementById("dynamic-list");
    var candidate = document.getElementById("candidate");
    var item = document.getElementById(candidate.value);
    ul.removeChild(item);
}

Tags:

Html Example

Recent Posts