删除父元素jQuery

Question

How can I remove all elements including its parent when click. The tabs is generated dynamically. What I tried so far is:

I'm using bootbox for the confirmation.

function remove() {
        bootbox.confirm("Are you sure?", function(result) {
          if( result != false ) {
              var anchor = $(this).siblings('a');
              $(anchor.attr('href')).remove();
              $(this).parent().remove();
              $(".nav-tabs li").children('a').first().click();
          }
    }); 
}

The tab that I will remove is generated through this:

$(document).on('submit','#pop-form', function(e) {
    // make an ajax request
    $.post('../admin/FLT_add_tab.do',
            $('#pop-form').serialize(),
            function( data ) {
                // if data from the database is empty string
                if( $.trim( data ).length != 0 ) {
                    // hide popover
                    $('#popover').popover('hide');
                    //append new tab and new tab content
                    var id = $(".nav-tabs").children().length - 1;
                    $('#popover').closest('li').before('<li><a href="#tab_'+ id +'" data-toggle="tab" class="g-tabs">' + data + '&nbsp;</a></li>');         
                    $('.tab-content').append('<div class="tab-pane" id="tab_' + id + '"> <c:import url="flt-pis.html"></c:import> </div>');
                } else {
                    // error handling later here
                }
            }
    );
    e.preventDefault();
});

remove() is called by appending <i> when the user hover the tab

$(document).ready( function() {
    $(document).on('mouseenter', 'a.g-tabs', function() {
         $( this ).append( $('<i class="icon-clear-remove" onClick="tabRemove();"></i>') );
    });
    $(document).on('mouseleave', 'a.g-tabs', function() {
         $( this ).find( ".icon-clear-remove:last" ).remove();
    });
});

The JS that concern if the page is refreshed

<!-- Other tabs from the database -->
<c:forEach var="tabNames" items="${ allTabs }">
    <li><a href="#tab_${ tabNames.value }" data-toggle="tab" class="g-tabs">${ tabNames.key }&nbsp;</a></li>
</c:forEach>

Popover for adding new tab

<!-- Add new tab -->
<li><a href="#" id="popover">New <i class="icon-plus-sign"></i></a></li>

Answer 1

The main problem is remove method does not know on which element it is getting called, I've changed the remove to use jQuery handler instead of inlined click handler.

Try

$(document).on('mouseenter', 'a.g-tabs', function () {
    $(this).append($('<i class="icon-clear-remove"></i>'));
});
$(document).on('mouseleave', 'a.g-tabs', function () {
    $(this).find(".icon-clear-remove:last").remove();
});

jQuery(function () {
    $(document).on('click', '.icon-clear-remove', function () {
        var $this = $(this);
        bootbox.confirm("Are you sure?", function (result) {
            if (result != false) {
                alert('delete:' + $this[0].tagName)
                var $a = $this.closest('.g-tabs');
                alert($a.length)
                $($a.attr('href')).remove();
                $a.parent().remove();
                $(".nav-tabs li").children('a').first().click();
            }
        });
    })
})

Answer 2

I can't tell exactly how you are implementing this but if my guess is right this should work. If it doesn't work, you should consider setting up a fiddle.

function remove() {
     bootbox.confirm("Are you sure?", function(result) {
        if (result) { $(this).remove(); }
     });
}