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 -->
        <input id="newItem" type="text" placeholder="Please enter some text and submit" />
        <input id="itemSubmit" type="submit" value="Submit" />
    <!--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

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

            function addToList(item) {

            //Add the submitted item to the array

            //Call the updateList function to display the list on the page


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

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

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

                    //Reload the list on the page                    

            //Check if click was on the li item
            if ( &&"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


                //The parent is the li of the item clicked. Add the selected class

              //We are simply going to throw an alert with the selected item


        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;        







    Add new comment

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