Javascript - Adding, Selecting and Removing elements on a page.

In this article we look at adding items to a list, selecting an item and removing an item from the list using JavaScript.

The code below is pure Javascript without any jQuery. Please use the demo on the right hand side to see what you can achieve with the code below.

If you'd like a jQuery version of the code please leave a comment, also feel free to ask any questions.

<!--The HTML form to add items to the list starts here -->
    <form>
        <input id="newItem" type="text" placeholder="Please enter some text and submit" />
        <input id="itemSubmit" type="submit" value="Submit" />
    </form>
    <!--We just closed the form -->

    <!-- This is our empty list. We will add li items between the ul tags using javascript -->
    <ul id="itemUL"></ul>
And now the Javascript
<script type="text/javascript">   

       //Select the input and assign it to the newItem variable for use later
        var newItem = document.getElementById("newItem");

        //Select the submit button and assign it to the itemSubmit variable for use later
        var itemSubmit = document.getElementById("itemSubmit");

        //Select the ul and assign it to the itemUL variable for use later
        var itemUL = document.getElementById("itemUL");

        //Create an empty array
        var list = [];

        //Listen for a click on the submit button    
        itemSubmit.addEventListener('click', function(e){

            //Prevent the form from submitting, which would reload the page
            e.preventDefault();

            
            //Check if any text was entered
            if(newItem.value != '') {
                //Send the submitted value to the addToList function
                addToList(newItem.value);
            }
            
        
            });

            function addToList(item) {

            //Add the submitted item to the array
            list.push(item);

            //Call the updateList function to display the list on the page
            updateList();

        }


        itemUL.addEventListener("click",function(e) {

            //Check if the clicked item is the x inside the <span> tag
            if (e.target && e.target.matches("span")){

                //Get the value of the ID from the parent (li) and put it in the key variable below
                var key = e.target.parentNode.id;
                 
                 //Remove only the item that has the key above from the list array
                 list.splice(key, 1);   

                    //Reload the list on the page                    
                     updateList();
            }

            //Check if click was on the li item
            if (e.target && e.target.matches("li")){

                //This in this case is the ul. We get all the li's in the ul and loop through them
                this.childNodes.forEach(function(el) {

                    //Remove the selected class from each of the li's even if they don't have it
                    el.classList.remove("selected");

                });
                

                //The parent is the li of the item clicked. Add the selected class
                e.target.classList.add("selected");

              //We are simply going to throw an alert with the selected item
               alert(e.target.firstChild.data);                
               
            }

        });



        function updateList() {

                //Clear the form input
                newItem.value = '';

            
                //This is an empty variable called li for easy identification
                var li = '';

                //Loop through the array 
                for (i = 0; i < list.length; i++) {

                    // The value of each item's key = i. We add each item to the li variable
                    li += "<li class='' id='"+ i +"'>" +list[i] + " <span id='remove'>x</span></li>";
                    }

                //Display the list now stored in li inside the ul
                itemUL.innerHTML = li;        

</script>   

 

Demo

 

     

    Tags

    Comments

    Basic web development is the site deal with the sort of techniques like the tutorial and the source code of the suitable working. The article here is for the Java script and the addition of ukessay with the removal of eliminating the page with well set style by the input starts.

    Add new comment

    The content of this field is kept private and will not be shown publicly.
    Target Image