0

Not sure if the title is right, please suggest changes if you disagree.

I was working with content loaded via jquery (.load()) into a div. I had to remove couple items from the loaded content. I've done so in the same manner as in the jsfiddle example I wrote ( http://jsfiddle.net/AzxaL/12 ). This one does not use load() function which creates id duplication, but this is irrelevant.

The question is: why one work and another does not and what needs to change in else if(this.tagName == 'H2') { $(this).remove(); } of the not working example?

To save you hunting down differences, the only one is in the /* line of interest */

Working

$('#copy_working_box').html($('#copy_working_box').children('#wrapper').children()).fadeIn(300);

Not working

$('#copy_working_not_box').html(content).fadeIn(300);

Also, please notice that in the not working example the div#subcontent does get removed it is only the h2 that is not.

P.S. I'm looking for clarification as I understand that this issue exists only because of my flawed understanding of how this example works.

Thanks in advance.

Improve this question
3
  • 1
    I am really trying to understand your question but I just don´t get what you want to do. Can you explain the behavior you want? Commented Oct 9, 2012 at 11:23
  • 1
    @Marcus They already have the behaviour they want, they just want to know why one approach works and another approach (that they believe to be identical) doesn't. Commented Oct 9, 2012 at 11:44
  • @Marcus Anthony is correct it is exactly what I was asking for. Commented Oct 9, 2012 at 13:44

3 Answers 3

Reset to default
1

When you do this:

var content = $('#copy_working_not_box').children('#wrapper').children();

you get a jQuery object containing a list of elements at the time the code is run. That list isn't dynamic, so removing one (or more) of those elements from the DOM (using .remove()) doesn't update the list of elements in the object. However, changes to the content of those elements are reflected as your jQuery object contains references to the DOM elements.

When you select elements using the jQuery function, in this case with the following code:

var content = $('#copy_working_not_box').children('#wrapper').children();

what you end up with is a jQuery object containing the references to the corresponding DOM elements. jQuery objects are array-like (they have a length property, and individual elements can be accessed using the square bracket notation [0]) so for our purposes we can think of it simply as an array of elements.

Given the HTML that we're working with, that array would consist of a <h2> element and a <div> element with the id of content. For the purposes of illustration, we'll represent that like so:

[<h2>, <div#content>]

Now, we're dealing with two cases in your code.

  1. Removing an element from the DOM that's a descendent of a DOM element in our array (jQuery object).
  2. Removing an element from the DOM that's one of the DOM elements in our array.

In case one, we start with the reference to the element in our jQuery object; that's the <div#content> element. We then access its children - [<p>, <div#subcontent>], filter that down to just the <div#subcontent> and remove it. Since our array still has a reference to <div#content>, and that in turn has references to its descendents, this change to the DOM will affect it (the reference to the child <div#subcontent> is removed from <div#content>).

In case two, we start with the reference to the element in our jQuery object; that's the <h2> element. We then simply remove this element - that removes it from the DOM, so any references to it in other DOM elements (i.e. its ancestors) will be updated. However, we still have a reference to the DOM element itself stored in our jQuery object.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thank you @Anthony. This indeed answers my question.
Sorry for unaccept, but could you clarify why it actually removes one item but not the other in the non-working example?
@StrayObject I can, but don't have time for a full explanation right now. I should be able to in a couple of hours.
Well, if you find a moment I would really like to know. Thanks anyway.
@StrayObject Later than I'd anticipated, but I've finally gotten around to adding a more in-depth explanation.
1

Why not using the jQuery filters to remove the elements?

$('#copy_working').click(function() {
    var $clone = $('#wrapper').clone();

    // remove unwanted elements
    $clone.find('#content #subcontent, h2').remove()

    $('#copy_working_box')
        .hide()
        .html($clone)
        .fadeIn(300);
});
Improve this answer

1 Comment

This is very neat indeed. I have to mark Anthony's answer as a correct one though as he specifically explains where my logic was wrong and why the code did not work. Yours is a great example of clean and proper approach to what I was trying to accomplish. Thanks.
0

In your code you are doing 

var content = $('#copy_working_not_box').children('#wrapper').children();

and then 

.html(content)

Please note that jQuery.html(htmlString) method takes in the htmlString as input and not object

Perhaps you want to do .html(content.html());

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.