How do I remove descendant elements from a jQuery completed set?
I am a bit confused about which jQuery method and / or selectors to use when trying to select an element and then remove some 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 an 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 figure out why. I also tried to use remove()
unsuccessfully.
What would be the correct way to do this?
Ultimately, I need to set this up so that I can define a config array like:
var selectors = [
{
select: '#article',
exclude: ['#inset']
}
];
where select
defines a single element containing text content, and exclude
is an optional array that defines one or more selectors to ignore text content.
Given the final wrapped set with the elements removed, I would like to be able to call the jQuery method text()
to get 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 config array shouldn't work exactly like this, but it should provide roughly equivalent configuration potential.
Thanks for any help you can provide!
a source to share
I suppose you don't want to change the original HTML by removing elements from it, but you just want to get the content of the article without pasting. This is why I would like to use clone () to get a copy of the article and then remove the paste from it.
Like this:
$("#article").clone().find("#inset").remove().end().text()
- $ ("# article") selects the article div, clone creates a copy,
- find children delete (you can also use children),
- remove () removes the selected insert,
- end () reverts back to the original selection.
At the end, I just added the text () as you mentioned you want to do this.
a source to share
if you want to remove anything in #article but #inset use:
$('#article > *:not(#inset)').remove() // selects all direct children of #article but not #inset and removes them
see an example here: http://jsfiddle.net/zwPsD/
if you want to apply this rule to more than one DOM element, you can bind them:
$('#article, #article2, #article3, #etc').find('> *').not('#inset, #that, #and. #there').remove()
you can find an example of this here: http://jsfiddle.net/ZNjdE/
and with a simple one you can extract the text: http://jsfiddle.net/ZNjdE/2/
a source to share
Try something like this.
$('#article').children(':not(#inset)').each(function(){
alert($(this).text());
});
If you want to do it with an object:
var selectors = {
select: '#article',
exclude: ['#inset', 'p']
};
$(selectors.select).children(':not('+selectors.exclude.join(',')+')').each(function(){
alert($(this).text());
});
EDIT
To get any level of the ancestor, you can add additional selectors and use find()
. For instance.
$('#article').find('li:first, :not(#inset, #inset *)').each(function(){
alert($(this).text());
});
With this, you exclude #inset
all #inset
ancestors except the first li
. It won't work with the object selectors
before because you exclude a group of items and then include some of the excluded ones. You can do this with three elements in an object:
var selectors = {select: ... , exclude: ... , includeFromExcluded: ...};
a source to share
If I'm missing something, why can't you select all the elements <p>
in the article div?
$("#article p")
If this is not acceptable I think you are looking for a function filter
...
$("#article").filter(":not(#inset)")
Note: you can have multiple selectors in the: not () selector. They just need to be separated by commas, so this approach should suit your configuration needs.
a source to share