How to remove all <li>
tags ( ul.gallery li )
when click on the <button>
.
The Button is outside the <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();
});
});
Thanks in advance,
try like this:
jQuery('.button').click(function(e){
e.preventDefault();
jQuery('.gallery .gallery-list li').remove();
});
or like this according to your code :
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();
});
});
As you are looking for removing all the li
elements under the class gallery-list
. You can try as below -
jQuery('.button').on('click', function(e) {
e.preventDefault();
jQuery('.gallery-list > li').animate({
opacity: 0
}, 300, function() {
jQuery(this).remove();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.