Javascript supprimer div onclick

Question

Avec du JavaScript pur, je dois supprimer un li en cliquant sur le span.

• En cliquant sur remove je veux supprimer son 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); }

  Item de liste un remove
  Item de liste deux remove
  Item de liste trois remove
  Item de liste quatre remove
  Item de liste cinq remove
  Item de liste six remove

Answer 1

Ne polluez pas Object. Vous n'avez pas besoin de cette fonction dans chaque objet. Créez une fonction séparée et utilisez remove(), pas removeChild().

La méthode ChildNode.remove() supprime l'objet de l'arborescence à laquelle il appartient.

Mais remove ne fonctionne pas dans tous les navigateurs. C'est une nouvelle fonction. Donc je vous propose deux solutions.

Avec 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);
}

    Élément de liste un supprimer
    Élément de liste deux supprimer
    Élément de liste trois supprimer
    Élément de liste quatre supprimer
    Élément de liste cinq supprimer
    Élément de liste six supprimer

Avec removeChild().

Pourquoi 2 parentNodes?

Parce que le premier est le , mais vous avez besoin de 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);
}

  Élément de liste un supprimer
  Élément de liste deux supprimer
  Élément de liste trois supprimer
  Élément de liste quatre supprimer
  Élément de liste cinq supprimer
  Élément de liste six supprimer

Answer 2

Essayez la solution suivante.

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);
}

    Elément de liste un supprimer
    Elément de liste deux supprimer
    Elément de liste trois supprimer
    Elément de liste quatre supprimer
    Elément de liste cinq supprimer
    Elément de liste six supprimer

Il serait préférable de simplement définir une fonction simple au lieu de modifier le prototype de l'objet, comme l'a suggéré @Satpal.

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);
}

  Elément de liste un supprimer
  Elément de liste deux supprimer
  Elément de liste trois supprimer
  Elément de liste quatre supprimer
  Elément de liste cinq supprimer
  Elément de liste six supprimer

Answer 3

Vous voulez supprimer l'élément < li > qui contient l'option "remove"? Si c'est le cas, voici comment le faire.

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);
}

    Élément de liste un supprimer
    Élément de liste deux supprimer
    Élément de liste trois supprimer
    Élément de liste quatre supprimer
    Élément de liste cinq supprimer
    Élément de liste six supprimer