Clever Geek Handbook

Clone HTML page except divs of specified class

It's easy to clone your HTML file using jQuery:

alert($("html").clone().html());

My goal is to clone the whole program except the divs of the '.ignore' class, but the best I can do is display ONLY those divs.

// This displays the inverse of what I want: just the code to be removed
alert($("html").clone().find('.ignore').remove().html());

// Seems to have the exact same effect as above:
alert($("html").clone().find('.ignore').html());

What's the best way to get everything but the specified div class?

+3


source to share


2 answers


You can use the function .end 

alert($("html").clone().find('.ignore').remove().end().html());


A working fiddle is located here: http://jsfiddle.net/sh99ognm/

+4


source


You can put a filter in a selector.

This will return a new object containing the entire page, filtered:

$(function () {
    var newContent = $('body :not(.ignore)').clone(); 
});

Demo

This will fetch the filtered one html

and add it back to body

:



$(function () {
    var newContent = $('body :not(.ignore)').clone(); 

    $('body').empty();

    newContent.each(function () {
        $('body').append($(this));
    });
});

Demo

You can also use .filter()

:

$(function () {    
    var newContent = $('body > *').clone().filter(':not(.ignore)', function () {
        return $(this).html();
    }); 

    $('body').html(newContent);
});

Demo

0


source






More articles:


All Articles