CODEWITHSUNDEEP
jquerydomjquery-pluginsjquery-selectors
tom_pl
tom_pl

Reputation: 425

Remove parent of a parent with jQuery and DOM

My html looks like this :

<li>
    <div>
        <p class="delete">
            <a href="#">X</a>
        </p>
    </div>
    <div class="friend-avatar">
        <img src="" />
    </div>
</li>

After clicking anchor tag in 'delete' paragraph I'm showing a popup (using jquery-alert) and if user selects 'Yes' I would like the whole li containing this clicked a to fade out and then remove it. I was trying something like this, but the li stays visible :

$(function() {
    $(".delete a").click( function(){
        jConfirm('Remove friend?', 'Confirmation Dialog', 
        function(r){
            if(r==true){
               parent_li = $(this).closest('li');
               parent_li.fadeOut('slow', function() {$(this).remove();});
            }   
        });
        return false;
    });
});

What am I doing wrong ?

UPDATE

Just noticed, that when I click this 'delete' link, firebug shows following error :

a.ownerDocument is undefined
/site_media/jquery/jquery-1.4.2.js
Line 117

Upvotes: 1

Views: 3048

Answers (3)

Ross
Ross

Reputation: 511

Your reference to parent_li is outside the scope of the variable.

Just for interest's sake I would have changed the call back to its own function, that way I could reuse it.

$(function() {
    $(".delete a").click( function(){
        jConfirm('Remove friend?', 'Confirmation Dialog', 
        function(r){
            if(r==true){
               parent_li = $(this).parents('li');
               $(parent_li).fadeOut('slow', removeLi(parent_li));
            }   
        });
        return false;
    });
});

function removeLi(parent_li){
    $(parent_li).remove();
};

Upvotes: 0

Marko
Marko

Reputation: 72232

You should store $(this) in a variable since the scope changes inside your popup function.

Do something like:

$(function() {
    $(".delete a").click( function(){
        var $link = $(this); // Here's the magic
        jConfirm('Remove friend?', 'Confirmation Dialog', 
        function(r){
            if(r==true){
               parent_li = $link.closest('li');
               parent_li.fadeOut('slow', function() {$(this).remove();});
            }   
        });
        return false;
    });
});

Upvotes: 0

user113716
user113716

Reputation: 322502

I'm not familiar with that plugin, but my guess is that this does not refer to the element that was clicked, but rather to the dialog.

Try referencing this in a variable outside the jConfirm().

$(function() {
    $(".delete a").click( function() {

            // reference the <a> element
        var $a = $(this);
        jConfirm('Remove friend?', 'Confirmation Dialog', 
        function(r){
            if(r==true){

                 // use a to find the closest <li>
               var parent_li = $a.closest('li');
               parent_li.fadeOut('slow', function() {$(this).remove();});
            }   
        });
        return false;
    });
});

Upvotes: 2

Related Questions