javascript remove div onclick

Question

with pure javascript, I need to remove a li on click the span.

By clicking remove I want to remove its div.

Object.prototype.remove = function(){
    this.parentNode.removeChild(this);
};

var lis = document.querySelectorAll('li');
var button = document.querySelectorAll('span');

for (var i = 0, len = lis.length; i < len; i++) {
    button[i].addEventListener('click', remove, false);
}

<ul>
    <li>List item one<span> remove</span></li>
    <li>List item two<span> remove</span></li>
    <li>List item three<span> remove</span></li>
    <li>List item four<span> remove</span></li>
    <li>List item five<span> remove</span></li>
    <li>List item six<span> remove</span></li>
</ul>

You want remove which div?

Omprakash Arumugam
– Omprakash Arumugam

2017-02-16 13:06:29 +00:00
Commented Feb 16, 2017 at 13:06 — Omprakash Arumugam
– Omprakash Arumugam, Commented Feb 16, 2017 at 13:06

Suren Srapyan · Accepted Answer · 2017-02-16 13:17:29Z

6

Don't pollute Object. You don't need this function in every object. Create an separate function and use remove(), not removeChild().

The ChildNode.remove() method removes the object from the tree it belongs to.

But remove doesn't work in every browser. It is a new function. So I suggest you two solutions.

With remove()

var remove = function(){
    this.parentNode.remove();
};

var lis = document.querySelectorAll('li');
var button = document.querySelectorAll('span');

for (var i = 0, len = lis.length; i < len; i++) {
    button[i].addEventListener('click', remove, false);
}

<ul>
    <li>List item one<span> remove</span></li>
    <li>List item two<span> remove</span></li>
    <li>List item three<span> remove</span></li>
    <li>List item four<span> remove</span></li>
    <li>List item five<span> remove</span></li>
    <li>List item six<span> remove</span></li>
</ul>

With removeChild().

Why 2 parentNodes?

Because the first is the <span>, but you need li

function remove() {
  this.parentNode.parentNode.removeChild(this.parentNode);
}

var lis = document.querySelectorAll('li');
var button = document.querySelectorAll('span');

for (var i = 0, len = lis.length; i < len; i++) {
  button[i].addEventListener('click', remove, false);
}

<ul>
  <li>List item one<span> remove</span></li>
  <li>List item two<span> remove</span></li>
  <li>List item three<span> remove</span></li>
  <li>List item four<span> remove</span></li>
  <li>List item five<span> remove</span></li>
  <li>List item six<span> remove</span></li>
</ul>

edited Feb 16, 2017 at 13:17

answered Feb 16, 2017 at 13:07

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AymDev Over a year ago

I think most people aren't aware of remove() which is better and are used to removeChild().

DDfrontenderLover Over a year ago

Thanks for the brilliant response and effect!

kind user · Accepted Answer · 2017-02-16 13:11:47Z

1

Try following solution.

Object.prototype.remove = function(){
    this.parentNode.parentNode.removeChild(this.parentNode);
};

var lis = document.querySelectorAll('li');
var button = document.querySelectorAll('span');

for (var i = 0, len = lis.length; i < len; i++) {
    button[i].addEventListener('click', remove, false);
}

<ul>
    <li>List item one<span> remove</span></li>
    <li>List item two<span> remove</span></li>
    <li>List item three<span> remove</span></li>
    <li>List item four<span> remove</span></li>
    <li>List item five<span> remove</span></li>
    <li>List item six<span> remove</span></li>
</ul>

It would be better to just define a simple function instead of changing the object prototype, as @Satpal suggested.

function remove() {
  this.parentNode.parentNode.removeChild(this.parentNode);
}

var lis = document.querySelectorAll('li');
var button = document.querySelectorAll('span');

for (var i = 0, len = lis.length; i < len; i++) {
  button[i].addEventListener('click', remove, false);
}

<ul>
  <li>List item one<span> remove</span></li>
  <li>List item two<span> remove</span></li>
  <li>List item three<span> remove</span></li>
  <li>List item four<span> remove</span></li>
  <li>List item five<span> remove</span></li>
  <li>List item six<span> remove</span></li>
</ul>

edited Feb 16, 2017 at 13:11

answered Feb 16, 2017 at 13:06

kind user

42k8 gold badges69 silver badges78 bronze badges

1 Comment

Satpal Over a year ago

Why do you need to pollute Object? Suggest OP to define a simple function

Dyd666 · Accepted Answer · 2017-02-16 13:09:39Z

0

You want to remove the < li > element that contains the "remove" option? If so, that's how to do it.

Object.prototype.remove = function(){
    this.parentNode.parentNode.removeChild(this.parentNode);
};

var lis = document.querySelectorAll('li');
var button = document.querySelectorAll('span');

for (var i = 0, len = lis.length; i < len; i++) {
    button[i].addEventListener('click', remove, false);
}

<ul>
    <li>List item one<span> remove</span></li>
    <li>List item two<span> remove</span></li>
    <li>List item three<span> remove</span></li>
    <li>List item four<span> remove</span></li>
    <li>List item five<span> remove</span></li>
    <li>List item six<span> remove</span></li>
</ul>

answered Feb 16, 2017 at 13:09

Dyd666

7351 gold badge11 silver badges30 bronze badges

Collectives™ on Stack Overflow

javascript remove div onclick

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related