creating a shopping list and then delete item with double click

[webdeveloper123]

Hi,

I am fairly new to JS and need some advice/logic. I am trying to create a Shopping list using DOM, which adds an item to a list and then when I want to remove it, it should remove on double click. Problem is when I double-click, it deletes all the items, not just the one I double clicked on. I'm pretty sure I have to generate an array of DOM elements and go from there, But I am stuck as what to do next. Here is my code:

  document.getElementById("addNew").onclick = function () {
            addOne();
        }
          document.getElementById("sList").ondblclick = function () {
            deleteList();
        }
        function addOne() {
            var a = document.getElementById("addItem").value;
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(a));
            document.getElementById("sList").appendChild(li);

        }
        function deleteList() {
             const element = document.getElementById("sList");
            element.remove();
        }

And the HTML:

    <div id="message">JavaScript Shopping list</div>
    <div>
        <input type="text" id="addItem">
        <input type="button" id="addNew" value="Add to List"> </div>
    <div id="output">
        <h1>Shopping List</h1>
        <ol id="sList"> </ol>
    </div>

Many thanks

[webdeveloper123]

figured it out. anyone who is interested it's this:
 

       document.getElementById("addNew").onclick = function () {
            addOne();
        }
           document.getElementById("sList").ondblclick = function () {
            deleteList();
        }
        function addOne() {
            var a = document.getElementById("addItem").value;
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(a));
            document.getElementById("sList").appendChild(li);

        }
          function deleteList() {
           const list = document.getElementById("sList");
  list.removeChild(list.firstElementChild);
        }

and HTML same as above

[Barand]

Your deleteList() function (as it says on the tin) deletes the whole list. You need to to delete just the list item that is doubleclicked

Here's my version

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
<script type='text/javascript'>

    $().ready(function() {
        $("#addNew").click(function () {                          
            let txt = $("#addItem").val()                        // get the item text
            let li = $("<li>", {"text":txt, "class":"sItem"})    // create an <li> item
            $(li).dblclick(function() {                          // add dblclick event handler 
                $(this).remove()
                $("#addItem").focus()
            })
            $("#sList").append(li);                              // append li to ol item
            $("#addItem").val("").focus()                        // clear input field and ready for next input
        })
        
        $("#addItem").focus()
    })

</script>

[edit] PS Yours always deletes the first item in the list; mine deletes the one that is doubleclicked.

Edited April 28, 2022 by Barand

[webdeveloper123]

hey thanks for your code barand. Yes I knew why it deleted the whole list, but I couldn't figure out how to delete only single items in the list. Ended up getting it to work!

[webdeveloper123]

actually mines not working, it removes first child only

[webdeveloper123]

18 minutes ago, Barand said:

PS Yours always deletes the first item in the list; mine deletes the one that is doubleclicked

Yes I figured that out after I posted mine as the solution!