Unable to delete individual list items from unordered list in JavaScript

Question

I tried to create a function to delete individual list items by using addEventListener to the unordered list which calls a function that checks if the 'delete' button was clicked for that list item. If the 'delete' button was clicked, the function is supposed to delete the list item. But it doesn't seem to be working. Below is the code:

<!doctype html>


<html>
    <head>
        <meta charset='UTF-8'>
        <link rel='stylesheet' href='listStyle.css'>
    </head>
    <body>
        <h2 id='heading'>grocery list</h2>
        <p>enter item into text box and press "enter" or click "submit".</p>
        <p>to remove item, click "remove".</p>
        <p>to reset list, click "reset".</p>
            <input type = 'text' id = 'item' name = 'item'><br><br>
            <button id = 'myBtn' onclick = 'myFunction()'>submit</button>
            <button onclick = 'resetFcn()'>reset</button>
        </form>
        <script>
        
            var str = document.getElementsByTagName('h2');
            var strUpper = str[0].innerHTML.toUpperCase();
            document.getElementById('heading').innerHTML = strUpper;
            
            var res = document.createElement('ul');
            res.setAttribute('id', 'myUL');
            res.addEventListener('click', delBtn);
            
            var input = document.getElementById('item');
            input.addEventListener('keyup', function(event){
                if(event.keyCode===13) {
                    document.getElementById('myBtn').click();
                }
            });
                        
            function myFunction() {
                let x = document.getElementById('item').value;
                if (x == '') {
                    alert ('enter input before submitting');
                }
                else {
                    document.body.appendChild(res);
                    var listItem = document.createElement('li');
                    const node = document.createTextNode(x);
                    
                    var btn = document.createElement('button');
                    btn.innerHTML = 'remove';
                    btn.setAttribute('id', x);
                    btn.setAttribute('class', 'delete');
                    
                    var att= document.createAttribute('style');
                    att.value = 'float: right';
                    btn.setAttributeNode(att);
                    
                    listItem.append(x, ' ');
                    listItem.appendChild(btn);                   
                    res.appendChild(listItem);
                    item.value = '';
                }
            }
            
            function resetFcn() {
                while (res.firstChild) {
                    res.removeChild(res.firstChild);
                }
            }
            
            function delBtn() {
                if(event.target.classList.contains('delete')){
                    event.target.closest('listItem').remove();
                }
            }       
            
        </script>

    </body>
    
    
</html>

Laurent Dhont · Accepted Answer · 2021-07-05 14:27:32Z

Just add the click handler of the delete button inside your myFunction function:

function myFunction() {
    let x = item.value;
    if (x == '') {
        alert ('enter input before submitting');
    }
    else {
        const listItem = document.createElement('li');
        listItem.innerText = x;

        const btn = document.createElement('button');
        btn.innerText = 'remove';

        btn.addEventListener("click", (evt) => {
            listItem.remove();
        }); //this way you can delete the list item because it is in the same scope

        listItem.appendChild(btn);
        myUl.appendChild(listItem);
        item.value = '';
    }
}

This is outside your question but I would also clean up your code, remove the closing form tag, use const/let in stead of var. Do not use keyCode because it is deprecated, ...

I also inserted the ul element in your html:

<ul id="myUl">

</ul>

const myUl = document.getElementById("myUl");

For your reset function you can just set the innerHtml of the ul to an empty string in stead of looping through all the elements:

function resetFcn() {
    myUl.innerHTML = "";
}

Hope this helped, good luck!

Collectives™ on Stack Overflow

Unable to delete individual list items from unordered list in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related