Question

I’m loading some XML in my document and add a DIV-button to it. By clicking the button, I wan’t to fadeOut() not only the button, but also its parent element. While referencing and fading out the button itself is working, I fail to get access to its parent-element. (see the last lines in my code).

$(document).ready(function(){

    var searchstring = decodeURIComponent(getUrlVars()["search"]);

    $.ajax({
        url: 'data.xml',
        type: 'GET',
        dataType: 'xml',
        timeout: 10000,
        error: function(){
            alert('Error loading XML document');
        },
        success: function(xml){
            $(xml).find('entry').filter(function(index) { return $('lemma', this).text() == searchstring; } ).each(function() { 
                $(this).find('part_gp > part').each(function(){
                    var more = $('<div class="more">+</div>');
                    $(this).after(more);
                    more.click(fader);
                });

            $( "#result" ).append( $(this) );

            });
            }
    });
});

function fader() {
    $(this).fadeOut();   // this works!!
    $(this).parent().fadeOut(); // this doesn't work!!
}

UPDATE:

The XML/HTML will look like this:

<part_gp>
  <part>Grafschaft</part>
  <div class="more">+</div>
  <pos> feminin / weiblich</pos>
</part_gp>

I want to hide the whole part_gp..

$(this).parents("part_gp").fadeOut();

didn’t work either..

Answer 1

The problem is that you’re using $(this).after(). That is putting your button after the block you want to hide, not inside of it. What you really want is $(this).append().

http://api.jquery.com/after/
http://api.jquery.com/append/