Question

Check the code below:

<script>
 var cls = ['', 'a', 'a b', 'a b c'];
var divs = $('div.wrap').children();

note that children() performs a destructive opration i.e it constructs a new jquery object

var appendClass = function() {
 divs.append(function() {
return '<div>' + (this.className || 'none') + '</div>';
});
};

appendClass();

$('button').bind('click', function() {
var tc = this.className || undefined;
divs.toggleClass(tc);
appendClass();
});

$('a').bind('click', function(event) {
event.preventDefault();

//(children is a destructive method which have constructed new jquery object so what is the use of using empty method on the upcoming statement) 
divs.empty().each(function(i) {
this.className = cls[i];
});
 appendClass();
});

so what is the use for using empty method on divs variable ??

Answer 1

Empty()method :

This method removes not only child (and other descendant) elements,
but also any text within the set of matched elements. This is because,
according to the DOM specification, any string of text within an
element is considered a child node of that element.

Use Cases

1. you want to clear all the existing data and append the new data.

2. Useful for templates, where you manipulate data .

    divs.empty().each(function(i) {
   this.className = cls[i];
   });
   

above code is useless, as div get emptied, after that if you loop also no elements will found. i don’t know what markup you have, but above code will not useful.