CODEWITHSUNDEEP
javascriptfunctiondomdom-events
Absar Ahmad
Absar Ahmad

Reputation: 7

remove each li item todo list using on click

I intended to make a todo list but I'm getting a problem that i wanna make a button that come inline in list item like so <li>my task</li><button>Delete</button> but my delete button isn't deleting items correctly it only deletes one items and then start giving error

this is my code, please look here and also tell me what kind of mistakes I'm doing I'm very beginner in web development

<!DOCTYPE html>
<html>

<body>
    <input type="text" placeholder="Enter Task" onfocus="this.value=''" id="myTask">
    <button onclick="myFunction()">Try it</button>
    <button onclick="deleteTask()">del it</button>

    <ol id="myList">

    </ol>



    <script>
        function myFunction() {
           
            var node = document.createElement("LI");
            var myTask = document.getElementById("myTask").value;
            var textnode = document.createTextNode(myTask);
            node.appendChild(textnode);
            document.getElementById("myList").appendChild(node);
            var btn = document.createElement("input");
            var abcElements = document.querySelectorAll('LI');

            for (var i = 0; i < abcElements.length; i++){
                abcElements[i].id = 'abc-' + i;
            }
            // node.setAttribute("id", "li1");
            btn.setAttribute("type", "submit");
            btn.setAttribute("value", "delete");
            btn.setAttribute("id", "delete");
            node.appendChild(btn);
            btn.addEventListener('click', ()=>{
                // console.log("OK");
                document.getElementById("abc-0").parentNode.removeChild(document.getElementById("abc-0"))

            })

        }

        function deleteTask() {
            var i = 0;
            var item = document.getElementsByTagName("LI")[i];
            i++;
            item.parentNode.removeChild(item);
        }

    </script>
</body>

</html>

So I just want to make a delete button with every list item as I click on Try it button

Upvotes: 0

Views: 2420

Answers (2)

trincot
trincot

Reputation: 350300

Some points to address:

  • Don't call a function myFuntion. Give it a descriptive name, like addTask
  • Don't create id-attributes with sequential numbers. That is almost never needed.
  • The initial HTML should not have a delete button, since it should associate with a list item.
  • Don't make the type of the delete button "submit". That only makes sense when you have a form element, and need to submit the form.
  • Don't give the created button the same id over and over again: that is invalid in HTML. id-attributes should have unique values. But again, it is rarely needed to assign an id to dynamically generated elements.
  • In an event listener you can use the event object to get the element on which the event was fired. Or you can use the this object in a function. But you can also reference the node variable that exists in the so-called closure.

function addTask() {
    var node = document.createElement("LI");
    node.textContent = document.getElementById("myTask").value;

    var btn = document.createElement("button");
    btn.textContent = "delete";
    btn.addEventListener('click', () => node.remove());
    node.appendChild(btn);

    document.getElementById("myList").appendChild(node);
}
li > button { margin-left: 5px }
<input type="text" placeholder="Enter Task" onfocus="this.value=''" id="myTask">
<button onclick="addTask()">Add task</button>
<ol id="myList"></ol>

Upvotes: 1

eamanola
eamanola

Reputation: 434

try something like this:

function myFunction() {
   const li = document.createElement("li");
   li.innerHTML = document.getElementById("myTask").value;

   const button = document.createElement("button");
   button.innerHTML = "delete";
   
   li.appendChild(button);
   button.addEventListener("click", () => li.parentNode.removeChild(li));

   document.getElementById("myList").appendChild(li);
}

Upvotes: 0

Related Questions