使用不在父级中的 jquery 删除

Question

单击<button>时如何删除所有<li>标签( ul.gallery li ) 。
按钮位于<ul> 。

<div class="gallery">
  <ul class="gallery-list">
    <li>
        <img src="sample">
    </li>
    <li>
        <img src="sample">           
    </li>
    <li>    
        <img src="sample">            
    </li>
  </ul>
  <button class="button"></button>
</div>

jQuery

jQuery('.button').on( 'click', function( e ) {
    e.preventDefault();
    jQuery(this).parents( '.gallery li' ).animate( { opacity: 0 }, 300,function() {
        jQuery(this).remove();
    });
});

提前致谢，

Answer 1

试试这样：

jQuery('.button').click(function(e){
    e.preventDefault();
    jQuery('.gallery .gallery-list li').remove(); 
});

或根据您的代码像这样：

jQuery('.button').on( 'click', function( e ) {

    e.preventDefault();
    var gallery = jQuery(this).parents( '.gallery' );

    jQuery(gallery).animate( { opacity: 0 }, 300, function() {

        jQuery(".gallery-list li", jQuery(gallery)).remove(); 

    });

});

Answer 2

当您正在寻找删除类gallery-list下的所有li元素时。 您可以尝试如下 -

jQuery('.button').on('click', function(e) {
    e.preventDefault();
    jQuery('.gallery-list > li').animate({
    opacity: 0
        }, 300, function() {
        jQuery(this).remove();
    });

});