Jump to content

creating a shopping list and then delete item with double click


Go to solution Solved by Barand,

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution
Posted (edited)

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 by Barand
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.