Question Vérifiez si l'élément cliqué est le descendant du parent, sinon supprimez l'élément parent


J'essaie d'écrire un script dans JS vanilla (sans jQuery) qui enlèvera un élément de la page si quelqu'un clique en dehors de cet élément.

Cependant, cette div a beaucoup d'éléments imbriqués et la façon dont je l'avais configuré est qu'il disparaît même en cliquant sur un élément qui se trouve dans le premier élément.

Exemple de balisage:

<div id='parent-node'>
  This is the Master Parent node
  <div id ='not-parent-node'>
     Not Parent Node
    <button>Button</button>
    <div id='grandchild-node'>
      Grandbaby Node
    </div>
  </div>
</div> 

Je voudrais donc que peu importe la profondeur de l’imbrication d’un élément, il vérifie si c’est un descendant du <div id='parent-node'> élément. Donc, si je clique là-bas, le nœud parent et tous ses descendants ne seront pas supprimés. le div et ses descendants devraient SEULEMENT être supprimé dynamiquement en cliquant en dehors du parent div.

Actuellement, c'est ce que j'ai et je sais qu'il y a de sérieuses erreurs dans ce que j'ai écrit:

function remove(id) {
    return (elem = document.getElementById(id)).parentNode.removeChild(elem);
}

document.addEventListener("click", function (e) {
    remove('parent-node');
});

12
2018-01-05 21:59


origine


Réponses:


Depuis event.target est une référence à l'élément cliqué, vous pouvez vérifier pour voir si #parent-node est event.target ou si contient  event.target comme élément descendant.

Exemple ici

Dans l'extrait de code ci-dessous, un écouteur d'événement est joint au document. Si l'élément qui a déclenché l'événement click n'est pas un descendant de #parent-node et n'est pas  #parent-node, alors l'élément est supprimé.

document.addEventListener("click", function(e) {
  var element = document.getElementById('parent-node');

  if (e.target !== element && !element.contains(e.target)) {
    element.parentNode.removeChild(element);
  }
});

document.addEventListener("click", function(e) {
  var element = document.getElementById('parent-node');
  
  if (e.target !== element && !element.contains(e.target)) {
    element.parentNode.removeChild(element);
  }
});
#parent-node {
  background-color: #f00;
}
<div id='parent-node'>
  This is the Master Parent node
  <div id='not-parent-node'>
    Not Parent Node
    <button>Button</button>
    <div id='grandchild-node'>
      Grandbaby Node
    </div>
  </div>
</div>


28
2018-01-05 22:09