Q:

How to write while members of class still exist in page condition

In jquery or js, preferably jQuery or js that is well supported, how can I do a while with the condition that there are still members of the class on the page.
What I am doing in the suite of the while is systematically removing the elements in the class, but I can not remove them all at once.
Let's say the class is .card.
Here is my code:
$('#dismissAllButton').click(function(){
    while($('.dataCard').length>0){
        $('.right').eq(0).remove();
        $('#left').children('.dataCard').first().addClass('animated').addClass('right');
        setTimeout(function(){
            $('.right').eq(0).remove();
            $('#right').children('.dataCard').first().addClass('animated').addClass('right');
        }, 150);
    }
});

HTML:
<div id="left">
    <div class="dataCard"></div>
    <div class="dataCard"></div>
</div>
<div id="right">
    <div class="dataCard"></div>
    <div class="dataCard"></div>
</div>

A:

You don't need a while loop. Instead, first iterate over each list, then within each list, iterate over each card. This allows you to set a delay on removing the card based on which list it is in so that you can get the effect of removing 1 by 1 from each list at the same time.
$("#dismissAllButton").on("click", function() {
    $("#left, #right").each(function(i){
        $(".dataCard",this).each(function(ii) {
            var card = $(this);
            setTimeout(function() {
                card.addClass("right");
                setTimeout(function() {
                    card.remove();
                },500);
            }, i*250+ii*500); // adjust `250` and `500` as needed.
        });
    });
});

Demo
250 is the delay between left and right, and 500 is the animation duration (dont forget to also update the css transition to reflect that)

