I'm a little confused about which jQuery method and/or selectors to use when trying to select an element, and then remove certain descendant elements from
the wrapped set.
For example, given
the following HTML:
<div id="article">
<div id="inset">
<ul>
<li>This is bullet point #1.</li>
<li>This is bullet point #2.</li>
<li>This is bullet point #3.</li>
</ul>
</div>
<p>This is
the first paragraph of
the article</p>
<p>This is
the second paragraph of
the article</p>
<p>This is
the third paragraph of
the article</p>
</div>
I want to select
the article:
var $article = $('#article');
but then remove <div id="inset"></div> and its descendants from
the wrapped set. I tried
the following:
var $article = $('#article').not('#inset');
but that didn't work, and in retrospect, I think I can see why. I also tried using remove() unsuccessfully.
What would be
the correct way to do this?
Ultimately, I need to set this up in such a way that I can define a configuration array, such as:
var selectors = [
{
select: '#article',
exclude: ['#inset']
}
];
where select defines a single element that contains text content, and exclude is an optional array that defines one or more selectors to disregard text content from.
Given
the final wrapped set with
the excluded elements removed, I would like to be able to call jQuery's text() method to end up with
the following text:
This is
the first paragraph of
the article.This is
the second paragraph of
the article.This is
the third paragraph of
the article.
The configuration array doesn't need to work exactly like that, but it should provide roughly equivalent configuration potential.
Thanks for any help you can provide!
