Find and manipulate a HTML DIV element that is stored in a variable, using jQuery

Question

I've been searching for a few hours to try and find a solution to my issue, for some reason partially similar answers on here don't seem to be working for me - so I'm creating my own question.

Basically, I'm loading pre-rendered HTML from the server using jQuery's $.get method, and I need to split the HTML returned into two sections (one that's wrapped in a div called #section-one and the other simply alongside that div, with no parent element).

See the example below:

$.get('http://jamie.st/remote_file.php', function(data){

    // I want to get '#section-one' and then remove it from data, basically splitting a single returned HTML resource into two, that can be placed in two different areas of the page.
    var sectionOne = $(data).find('#section-one');

    // This should only return the HTML of '#section-one'
    console.log(sectionOne);

    // Also how can I then remove '#section-one' from the 'data' variable? The equivalent of calling the below, but from the 'data' variables string/html.
    $(sectionOne).remove();

    // So eventually the below would return the HTML without the '#section-one' element (and it's children)
    console.log(data);

});

I've also created a jsfiddle which you can play around with if you need to, it's set up to use a real PHP file that I've hosted for demo purposes.

http://jsfiddle.net/6p0spp23/6/

If you can submit a jsfiddle link back that would be much appreciated, thanks in advance guys!

Answer 1

When you create a jQuery object with the remote contents $(data) becomes a collection of elements so instead of find() you want to use filter() like so:

$.get('http://jamie.st/remote_file.php', function(data){
    var $data = $(data),
        $sectionOne = $data.filter('#section-one'),
        $rest = $data.filter(':not(#section-one)');

    console.log($sectionOne);
    console.log($rest);

});

Demo fiddle

Answer 2

I think the best way to put the received data inside a parent div. Then you can call remove or any other method to use it.

You can make parent div hidden using .hide() method if you don't want to show it.

Here I did it: http://plnkr.co/edit/jQKXyles8sP8dliB7v0K?p=preview

// Add your javascript here
$(function() {

$.get('http://jamie.st/remote_file.php', function(data) {
$("#parent").hide();
$("#parent").html(data);
$("#section-one").remove();
console.log($("#section-one").html())
alert($("#parent").html())

});

});

Answer 3

When you remove a subsection from a derived jQuery object, the original string is not updated with the change so if you want the updated html content you need to generate it from the jQuery object. One way to do this is to

$.get('http://jamie.st/remote_file.php', function (data) {

    var $ct = $('<div />', {
        html: data
    });

    // I want to get '#section-one' and then remove it from data, basically splitting a single returned HTML resource into two, that can be placed in two different areas of the page.
    var sectionOne = $ct.find('#section-one');

    // This should only return the HTML of '#section-one'
    console.log(sectionOne);

    // Also how can I then remove '#section-one' from the 'data' variable? The equivilant of calling the below, but from the 'data' variables string/html.
    $(sectionOne).remove();

    // So eventually the below would return the HTML without the '#section-one' element (and it's children)
    console.log($ct.html());

});

Demo: Fiddle