Javascript Add Edit Delete LI

How To Add, Edit, Remove Selected LI Using Javascript  

add edit delete selected <li> in js


In This Javascript Tutorial we will See How To :

 - 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 .


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>



OUTPUT:



insert update delete UL list items in javascript




Share this

Related Posts

Previous
Next Post »