CODEWITHSUNDEEP
javascriptdom
William
William

Reputation: 4588

Removing dynamically created elements with vanilla JavaScript by clicking on them

I wrote the code below to dynamically add li elements to a ul element. I want the user to be able to click on any one of them and have that li item removed. I know how to do this with JQuery but I want to know how to do it with vanilla JavaScript.I understand that removeChild() is the only method at my dispose to do this but I am a bit confused as to how to use it to accomplish the task at hand.

Thank you.

http://jsfiddle.net/3wk0866o/

HTML

<form id="input-form">
    <input id="input-field" type = "text"/>
<button>Submit</button>
</form>

<ul id="list" >

</ul>

JavaScript

var form = document.getElementById("input-form");



function getInput(event){
    event.preventDefault();     
    var inputValue = document.getElementById("input-field").value  

    form.reset();              

    document.getElementById("list").innerHTML += "<li>"+ inputValue +"</li>"; 
}
form.addEventListener("submit",getInput,false)

Upvotes: 1

Views: 3360

Answers (3)

user4698813
user4698813

Reputation:

Try this:

http://jsfiddle.net/3wk0866o/1/

I just added this listener function:

function removeItem(e) {
    var target = e.target;
    if(target.tagName !== 'LI') return;
    target.parentNode.removeChild(target);
}
list.addEventListener('click', removeItem);

It adds an event listener to the "list" UL element, and listens for clicks inside of it. e.target is the element clicked, and if the element clicked isn't a LI element, then the function just returns. If it is, then it removes the element and all of its children.

If you want to know how the last bit that removes the element works:

target.parentNode finds the parent element of the clicked LI element (UL), and then you just simply call removeChild on that node, since LI is a child element of UL. You can also use the remove method on the element directly, but that is not well supported yet.

Note that you might run into problems if your LI element has children; in that case, the target might show up as one of LI's children and not as LI. To solve that you can use a loop that walks through the DOM until it gets to an UL element, or until it finds a LI element to remove:

http://jsfiddle.net/3wk0866o/3/

function removeItem(e) {
    var target = e.target;
    while(target.tagName !== 'UL') {
        if(target.tagName === 'LI') {
            return target.parentNode.removeChild(target);
        }
        target = target.parentNode;
    }
}
list.addEventListener('click', removeItem);

If your LI elements will only have text inside of them, then the first solution is enough.

Good luck.

Upvotes: 1

rgajrawala
rgajrawala

Reputation: 2188

You could add an onclick event listener directly to the new child.

function getInput(event){
    event.preventDefault();     
    var inputValue = document.getElementById("input-field").value  

    console.log(inputValue)
    form.reset();              // _______________Reset method 

    // Create new element.
    var new_li = document.createElement('li');
    new_li.innerHTML = inputValue;
    // When it is clicked, remove it.
    new_li.onclick = function() {
        this.remove();
    };

    // Append element as child to list.
    document.getElementById("list").appendChild(new_li);
}

JSFiddle

Upvotes: 1

Daniel
Daniel

Reputation: 3374

you can use parent.removeChild(child) to remove the item but you might have problem with finding the child because the item has been added on the fly.

2 suggestion:

  1. add the item in the list as you add them to the list and then grab them from the list instead of finding them on the page.
  2. use .On function to attach click event and then use this in the event to grab them.

Upvotes: 0

Related Questions