I can't set JS removeChild to work properly

Question

I can't set JS removeChild to work properly

224 Views Asked by Juno Yun At 04 April 2025 at 10:14

sorry for my silly questions and bad explanation

Currently I’m learning JS and I couldn’t understand what went wrong.

I'm trying to make new

list when onlick the button, and I want to delete it when onclick the X

It does work in someways, but it only works when there are more than 1 of P tags. So it's impossible to remove everything which is submitted

var list = document.querySelector("#list");
var text = document.querySelector("#write");
var btn = document.querySelector("#submit");

btn.addEventListener("click", add);

function add(){
    var newP = document.createElement("p");
    var newUl = document.createElement("ul");
    var newLi = document.createElement("li");
    var newText = document.createTextNode(text.value);
    var delbtn = document.createElement("span");
    delbtn.setAttribute("class", "del")
    var delText = document.createTextNode("X");
    var delbtns = document.querySelectorAll(".del")
    list.appendChild(newP);
    newP.appendChild(newUl);
    newUl.appendChild(newLi);
    newLi.appendChild(newText);
    newP.appendChild(delbtn);
    delbtn.appendChild(delText);
    text.value = ""
    text.focus();
    
    for (var i = 0; i < delbtns.length; i++){
        delbtns[i].addEventListener("click", function () {
            if(this.parentNode.parentNode)
            this.parentNode.parentNode.removeChild(this.parentNode)
        });
    }
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        p{
            width: 80%;
        }
        .del{
            border: 1px solid #999;
            display: flex;
            flex-basis: 200;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <form action="">
        <input type="text" id="write" />
        <input type="button" id="submit"/>
    </form>
    <div id="list"></div>
    <script src="index.js"></script>
</body>
</html>

Original Q&A

There are 5 best solutions below

**Syed** · Answer 1

My approach would be don't fight the browser, dont loop too much. First of all drop the old school way of iterating through DOM to find the parent then trying to find the child then removing it.

There is simple way of doing this event delegation.

you are creating a node on the fly any ways. Good Job. just add onclick event listener to it and trigger element.remove() function. Yup thats new and right way of doing it.

In my example I have replaced it with this.parentElement.remove()thus it removes the element from which the event took place.

Once the node is created and event registered along with it, it is no longer your headache to figure it out.

Created a p element created span element for X innerHTMl of P element is updated with value of text field, after which span element is added as child. Then finally P element is added to the list div. When you click the X it removes the P element and everything with it.

 <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
            p{
                width: 80%;
            }
            .del{
                border: 1px solid #999;
                display: flex;
                flex-basis: 200;
            }
        </style>
    </head>
    <body>
        <h1>hello world</h1>
        <form action="">
            <input type="text" id="write" />
            <input type="button" onclick="add()" value="add" id="submit"/>
        </form>
        <div id="list"></div>
    <script>

    function add(){
    var mylist = document.getElementById("list");
    var p = document.createElement("P");
    var span = document.createElement("SPAN");
    span.innerHTML ='\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'X'; 
span.onclick = function () {
        this.parentElement.remove();
    }; 
    p.innerHTML = document.getElementById("write").value; 
        p.appendChild(span); 
    
    mylist.appendChild(p); 

    }

    </script>
    </body>
    </html>

Added note: its all native no library needed. Other than bunch of HTML there is not much of clunky JS code. keep it simple and use the power of browser and augment design along with it.

**luiscrjr** · Answer 2

Everytime you click the add button, you're adding listener to all buttons and not removing (causing to a button to have multiple listeners).

You can set your event hander directly in delbtn element.

delbtn.addEventListener("click", function(e) {
   if (this.parentNode.parentNode)
      this.parentNode.parentNode.removeChild(this.parentNode)
});

Working fiddle: https://jsfiddle.net/mrlew/g1fckz6t/3/

**ikiK** · Answer 3

You are bubbling your events constantly by looping, that is first mistake. Wen you create new item you need to add event Listener to it alone one time. If you would check your structure with dev tools you would see couple of same events on one item.

SO after you create elements just target the last one:

document.querySelector("#list > p:last-of-type > span.del:last-of-type").addEventListener("click", function () {
        if(this.parentNode.parentNode)
        this.parentNode.parentNode.removeChild(this.parentNode)
    });

EXAMPLE:

var list = document.querySelector("#list");
var text = document.querySelector("#write");
var btn = document.querySelector("#submit");

btn.addEventListener("click", add);

function add(){
    var newP = document.createElement("p");
    var newUl = document.createElement("ul");
    var newLi = document.createElement("li");
    var newText = document.createTextNode(text.value);
    var delbtn = document.createElement("span");
    delbtn.setAttribute("class", "del")
    var delText = document.createTextNode("X");
    var delbtns = document.querySelectorAll(".del")
    list.appendChild(newP);
    newP.appendChild(newUl);
    newUl.appendChild(newLi);
    newLi.appendChild(newText);
    newP.appendChild(delbtn);
    delbtn.appendChild(delText);
    text.value = ""
    text.focus();
    
    document.querySelector("#list > p:last-of-type > span.del:last-of-type").addEventListener("click", function () {
            if(this.parentNode.parentNode)
            this.parentNode.parentNode.removeChild(this.parentNode)
        });
 
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        p{
            width: 80%;
        }
        .del{
            border: 1px solid #999;
            display: flex;
            flex-basis: 200;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <form action="">
        <input type="text" id="write" />
        <input type="button" id="submit"/>
    </form>
    <div id="list"></div>
    <script src="index.js"></script>
</body>
</html>

And to note, you are creating new paragraphs with lists inside with just one item. Not sure is that intentional but that is not how HTML list should work. You should have ul element with more li's inside...

**Asaf** · Answer 4

You don't need to add multiple events with for loop, you just need to add event to every added button at the time, here is a working snippet

var list = document.querySelector("#list");
var text = document.querySelector("#write");
var btn = document.querySelector("#submit");

btn.addEventListener("click", add);

function add(){
    var newP = document.createElement("p");
    var newUl = document.createElement("ul");
    var newLi = document.createElement("li");
    var newText = document.createTextNode(text.value);
    var delbtn = document.createElement("span");
    delbtn.setAttribute("class", "del")
    var delText = document.createTextNode("X");
    newP.appendChild(newUl);
    newUl.appendChild(newLi);
    newLi.appendChild(newText);
    newP.appendChild(delbtn);
    delbtn.appendChild(delText);
    list.appendChild(newP);
    text.value = ""
    text.focus();
    delbtn.addEventListener("click", function () {
            if(this.parentNode.parentNode)
            this.parentNode.parentNode.removeChild(this.parentNode)
        });
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        p{
            width: 80%;
        }
        .del{
            border: 1px solid #999;
            display: flex;
            flex-basis: 200;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <form action="">
        <input type="text" id="write" />
        <input type="button" value="add" id="submit"/>
    </form>
    <div id="list"></div>
    <script src="index.js"></script>
</body>
</html>

**javascript lover** · Answer 5

I use power of closures in this answer if you want to understand this answer you need to understand javascript closures first.

const input = document.querySelector('#input');
                const btn = document.querySelector('#btn');
                
                function add() {
                    const inputVal = input.value;
                    input.value = '';
                    const ul = document.createElement('ul');
                    const li = document.createElement('li');
                    const p = document.createElement('p');
                    p.textContent = inputVal;
                    const deleteBtn = document.createElement('button');
                    deleteBtn.textContent = 'delete';
                    document.body.appendChild(ul);
                    ul.appendChild(li);
                    li.appendChild(p);
                    li.appendChild(deleteBtn);
                    deleteBtn.addEventListener('click', () => {
                        li.remove();
                    });
                };
                btn.addEventListener('click', add);

<input type="text" id="input" />
            <button id="btn">submit</button>

I can't set JS removeChild to work properly

There are 5 best solutions below

Related Questions in JAVASCRIPT

Related Questions in FOR-LOOP

Related Questions in OBJECT

Related Questions in REMOVECHILD

Related Questions in CREATEELEMENT

Trending Questions

Popular # Hahtags

Popular Questions