How To Add, Edit, Remove Selected LI Using Javascript [ with source code ]

How To Add, Edit, Remove Selected LI Using Javascript   [ with source code ]

In this video, we will guide insert update delete selected LI from UL in javascript

In this video, we will guide insert update delete selected LI from UL in javascript

  • Insert A New <LI> To A <UL> .
    • Display The Selected <LI> From The List To Input Text .
    • Update The Selected <LI> From The List Using Input Text .
    • Remove The Selected <LI> From The List .

On 3 Button Click Event In JS And Netbeans Editor .

Subscribe : https://www.youtube.com/channel/UCS3W5vFugqi6QcsoAIHcMpw

Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title>Javascript: add edit delete LI</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            li{cursor: pointer}
        </style>

    </head>
    <body>

        <input type="text" id="txt">
        <button onclick="addLI()">Add</button>
        <button onclick="editLI()">Edit</button>
        <button onclick="deleteLI()">Delete</button>

        <ul id="list">
            <li>HTML</li> 
            <li>CSS</li>
            <li>Javascript</li>
            <li>PHP</li>
        </ul>

        <script>

            var inputText = document.getElementById("txt"),
                 items = document.querySelectorAll("#list li"),
                 tab = [], index;

             // get the selected li index using array
             // populate array with li values

             for(var i = 0; i < items.length; i++){
                 tab.push(items[i].innerHTML);
             }

             // get li index onclick
             for(var i = 0; i < items.length; i++){

                 items[i].onclick = function(){
                     index = tab.indexOf(this.innerHTML);
                     console.log(this.innerHTML + " INDEX = " + index);
                     // set the selected li value into input text
                     inputText.value = this.innerHTML;
                 };

             }

            function refreshArray()
            {
                // clear array
                tab.length = 0;
                items = document.querySelectorAll("#list li");
                // fill array
                for(var i = 0; i < items.length; i++){
                 tab.push(items[i].innerHTML);
               }
            }
            function addLI(){

                var listNode = document.getElementById("list"),
                    textNode = document.createTextNode(inputText.value),
                    liNode = document.createElement("LI");

                    liNode.appendChild(textNode);
                    listNode.appendChild(liNode);

                    refreshArray();

                    // add event to the new LI

                    liNode.onclick = function(){
                     index = tab.indexOf(liNode.innerHTML);
                     console.log(liNode.innerHTML + " INDEX = " + index);
                     // set the selected li value into input text
                     inputText.value = liNode.innerHTML;
                 };

             }

             function editLI(){
                 // edit the selected li using input text
                 items[index].innerHTML = inputText.value;
                 refreshArray();
              }

              function deleteLI(){

                      refreshArray();
                      if(items.length > 0){
                          items[index].parentNode.removeChild(items[index]);
                          inputText.value = "";
                      }
              }

        </script>

    </body>
</html>

js javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

In this article we will discuss full details and comparison of both Ember.js and Vue.js

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.