Remove element in form JS

Now I'm a bit stuck in deleting an item from a form. my code below ain't doing what I want and I don't know how to fix it. Basically I want to remove the TD line from my form when I click on the trash icon, so I created this function that create the TD element and add the trash icon clickable, but what the code is doing is remove the trash icon and not the TD... I'm wondering how to get the index of the element from a form but didnt realized yet, so I've tried using the this.remove() statment but didnt worked. I'm glad with any help. Cheers

function montaTdBtn() {
let _td;
let _a;
let _img;
_td = document.createElement('td');
_td.setAttribute('class', 'buttn-tr');

_a = document.createElement('a');
_a.setAttribute('href', '#');

_img = document.createElement('img');
_img.setAttribute('src', 'favicon.ico');
_img.addEventListener("click", function () {
    this.remove();

});
_a.appendChild(_img);
_td.appendChild(_a);

return _td;
}

Upvotes: 2

Views: 85

Answers (1)

Unmitigated
Unmitigated

Reputation: 89139

You need to remove the parentNode.

_img.addEventListener("click", function () {
    this.parentNode.remove();
});

Since you have a reference to the <td> element, you can directly remove that as well.

_img.addEventListener("click", function () {
    _td.remove();
});

Upvotes: 2

Related Questions