web-dev-qa-db-fra.com

Comment supprimer un élément parent à l'aide de jQuery

J'ai quelques balises d'élément de liste dans mon jsp. Chaque élément de la liste contient des éléments, notamment un lien (balise "a") appelé delete. Tout ce que je veux, c'est supprimer tout l'élément de la liste lorsque je clique sur le lien.

Voici la structure de mon code:

$("a").click(function(event) {
  event.preventDefault();
  $(this).parent('.li').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="191" class="li">
  <div class="text">Some text</div>
  <h4><a href="URL">Text</a></h4>
  <div class="details">
    <img src="URL_image.jpg">
    <span class="author">Some info</span>
    <div class="info"> Text
      <div class="msg-modification" display="inline" align="right">
        <a name="delete" id="191" href="#">Delete</a>
      </div>
    </div>
  </div>
</li>

Mais ça ne marche pas. Je suis nouveau sur jQuery, alors j'ai essayé certaines choses, comme par exemple:

$(this).remove();

Cela fonctionne, il supprime le lien lorsque vous cliquez dessus.

$("#221").remove();

Cela fonctionne, cela supprime l'élément de liste indiqué, mais ce n'est pas "dynamique".

Quelqu'un peut-il me donner un pourboire?

javascriptjqueryparent
58
Noob

Utilisez simplement la méthode .closest() : $(this).closest('.li').remove();
Il commence par l’élément actuel, puis monte dans la chaîne à la recherche d’un élément correspondant et s’arrête dès qu’il en trouve un.

.parent() n'accède qu'au direct parent de l'élément, c'est-à-dire div.msg-modification, qui ne correspond pas à .li. Donc, il n'atteint jamais l'élément que vous recherchez.

Une autre solution en plus de .closest() (qui vérifie l'élément en cours puis monte dans la chaîne) utiliserait .parents() - cependant, cela impliquerait qu'il ne s'arrête pas dès qu'il trouve un élément correspondant (et qu'il ne vérifie pas l'élément actuel mais seulement éléments parent). Dans votre cas, cela n'a pas vraiment d'importance, mais pour ce que vous essayez de faire, .closest() est la méthode la plus appropriée.

Une autre chose importante:

[~ # ~] jamais [~ # ~] n'utilise le même ID que pour plusieurs éléments. Ce n'est pas autorisé et provoque des problèmes très difficiles à déboguer. Supprimez le id="191" Du lien et, si vous devez accéder à l'ID dans le gestionnaire de clics, utilisez $(this).closest('.li').attr('id'). En fait, ce serait encore plus propre si vous utilisiez data-id="123" Puis .data('id') au lieu de .attr('id') pour y accéder (votre ID d'élément n'a donc pas besoin de ressembler à l'ID ( base de données?) a)

107
ThiefMaster

qu'en est-il de l'utilisation de nwrap ()

<div class="parent">
<p class="child">
</p>
</div>

après avoir utilisé - $(".child").unwrap() - ce sera;

<p class="child">
</p>
18
dav

Utilisez parents() au lieu de parent():

$("a").click(function(event) {
  event.preventDefault();
  $(this).parents('.li').remove();
});
15
josemota

Supprimer le parent:

$(document).on("click", ".remove", function() {
       $(this).parent().remove(); 
});

Supprimer tous les parents:

$(document).on("click", ".remove", function() { 
       $(this).parents().remove();
});
7
Andrea_dev

Vous pouvez aussi utiliser ceci:

$(this)[0].parentNode.remove();
0
Andres Paul
$('#' + catId).parent().remove('.subcatBtns');
0
Itisha-systematix