상위 요소 jQuery 제거

Question

클릭하면 상위 요소를 포함한 모든 요소를 ​​어떻게 제거 할 수 있습니까? 탭은 동적으로 생성됩니다. 지금까지 시도한 내용은 다음과 같습니다.

확인을 위해 부트 박스를 사용하고 있습니다.

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(); 
      } 
    }); 
} 

내가 제거 탭이를 통해 생성됩니다

$(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(); 
}); 

UPDATE : 사용자가 탭을 마우스를 가져 가면

remove()가 <i>를 추가하여 호출

$(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(); 
    }); 
}); 

JS th 문제의 페이지는 새 탭을 추가

<!-- 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> 

팝 오버를 갱신하는 경우

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

Answer 1

가장 큰 문제는 내가 jQuery를 처리기 대신 인라인 클릭 핸들러를 사용하여 제거를 변경했습니다, remove 메소드가 호출지고있는 요소를 모르는 것입니다.

는`remove`라고 어떻게

$(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

나는 당신이 이것을 구현하는 방법을 정확하게 말할 수 있지만 내 생각 엔 인 경우 바로이 작동합니다. 작동하지 않는 경우 바이올린 설정을 고려해야합니다.

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