Search jQuery

jQuery Forum

Removing elements from a clone

in Using jQuery • 12 years ago

Hi,

I have a block of HTML that I am cloning, as I want to manipulate it to remove an element, so that I can then append that new HTML somewhere else on the page.

E.g.:

<div id="container">
<p>Some sample text to be filled in later...</p>
<a id="copy_btn" href="#">copy text</a>
</div>

Then in the jQuery, I have tried many different ways of removing stuff from that clone, but with no luck. E.g.

var cont = $('#container').clone();
$(cont).remove("copy_btn").appendTo("body");

There are no errors showing up in Firebug, but the html added to the bodu still contains the link with the id "copy_btn".

Is this even possible? The api says that remove() will remove matched selectors from the DOM, so as this is just a set of elements is that the reason? If so, is there a way to achieve this, or would I have to append it somewhere on my page and then perform the manipulation?

Thanks in advance

Replies(4)

jules

Re: Removing elements from a clone

12 years ago

I can't remove the element as well using .remove("#copy_btn") and .remove("id=[copy_btn]"). However this works:

$(cont).find("#copy_btn").remove().end().appendTo("body");

awirick

Re: Removing elements from a clone

12 years ago

Does this not work for you?

var $cont = $('#container').clone();
$cont.remove("#copy_btn").appendTo("body");

Since clone() returns a jQuery object you don't need to initialize another jQuery object. I've also added a $ prefix to the variable declaration for convention purposes.

pmbennett

Re: Removing elements from a clone

12 years ago

Thanks for the advice.

@awlrick - I have tried your suggestion and this still doesn't remove the link, it just appends what appears to be the cloned object. Thanks for the advice on $ prefix etc, it's only 10am and I have already learnt something new :-)

@jwiradin - I have also tried your suggestion and, yes, it does work. It does seem a pretty convaluted way of doing something that appears so trivial.

suhajdab

Re: Removing elements from a clone

12 years ago

$(cont).remove("copy_btn").appendTo("body");

The problem here is that:

.remove( [ selector ] )

selectorA selector expression that filters the set of matched elements to be removed.

http://api.jquery.com/remove/

Hence the suggestion .find("#copy_btn").remove() is the way to go and according to documentation.

Of course you have to remember that after find(), your result set is now the <a> you're removing, so to go back to the previous matched set, you need .end()

Your final js looking like:

var cont = $('#container').clone();
$(cont)

.find("#copy_btn")

.remove()

.end()

.appendTo("body");

Top Reply

Response title

Attachments

jQuery Forum

Removing elements from a clone

Replies(4)

Re: Removing elements from a clone

Re: Removing elements from a clone

Re: Removing elements from a clone

Re: Removing elements from a clone

.remove( [ selector ] )

Statistics

Tags

Actions