How to add and delete dynamic records in ul list using JS and HTML

Add to add data and display in ul list using JavaScript and HTML. In this, JS example will create a simple JS application. in this application, users can add items and records that will display on the list on the webpage and delete records dynamically using HTML and JS.

Add and delete dynamic records using JS and HTML

To Add records we have a form “myForm” that contains an input field with the id “itemName” and another input type of “submit that will be a button.

Now one submit of “myForm” get the data from “itemName” and prints it into itemList”  which is a ul element in the HTML.

App.html

<html>
<header>
   <title>To Do APP</title>
   
</header>
<body>
    <h1>To Do APP</h1>

    <form id="myForm">
        <input type="text" id="itemName" placeholder="Enter Item..">
        <input type="submit" value="Add Item">
    </form>

    <h2>Item List</h2>
    <ul id="itemList">
        
    </ul>
    <script src="todo.js"></script> 
</body>
</html>

App.js

let myForm = document.getElementById("myForm")
let itemName = document.getElementById("itemName")
let itemList = document.getElementById("itemList")

myForm.addEventListener("submit", (e) =>{
    e.preventDefault()
   itemList.insertAdjacentHTML("beforeend",`<li>${itemName.value}   <button onclick="DeleteItem(this)">Delete</button></li><br>`)
   itemName.value =""
   itemName.focus()
   console.log(itemName.value)
})

function DeleteItem(item){
 item.parentElement.remove()
}

Output: