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>

Answer 1

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>

Answer 2

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>