Question

I have the div event_wrapper that can be dynamically added on a page by clicking the link in add-event. The user can delete/add these divs as many times as they want. If the user chooses to delete all of these event_wrapper divs, I want to change the text inside add-event. Here is the HTML:

<div class="event_wrapper">
    <div class="event">
        <div class="well darkblue-background pull-left">
            <a class="close tooltip" data-tooltip="Delete this event"><i class="icon-remove"></i></a>
        </div>
    </div>
</div>


<div class="add-event pull-left">
    <a href="javascript:void(0);"> And Then...</a>
   </div>

(I am using jQuery) I tried using :empty selector, but it does not seem to be working. Any suggestions? Thanks!

Answer 1

Have a look at – https://stackoverflow.com/a/3234646/295852

And then use contentChange() like:

$('.event-wrapper').contentChange(function(){
    if($(this).children().length > 0){
        // events exist
        $(".add-event pull-left").children('a').html('And Then...');
    } else {
        // no events
        $(".add-event pull-left").children('a').html('your text');
    }
});