why is jquery cloning the children element also?

Question

Suppose I have the following code:

<ul> 
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Now when I do, $("ul").clone();, it clones the full ul element (all its children also). I want only to clone <ul> and not its children.

How to do that in jQuery?

I know in pure JavaScript (using cloneNode()), but I can't use this because of additional methods to perform also.

Because that is what clone does: [_Create a deep copy of the set of matched elements_](http://api.jquery.com/clone/). See also http://stackoverflow.com/questions/122102/most-efficient-way-to-clone-an-object — Nivas, Apr 21 '14 at 14:07
I don't get it? Why can't you do `$( $('ul').get(0).cloneNode() )` ? — adeneo, Apr 21 '14 at 14:08
If you don't want any of the children, it's much cheaper to just make a new empty `ul`: `$('
')` than to clone the element (including its children) and then remove its children, as several answer have suggested. — user229044, Apr 21 '14 at 14:08
why not? cloning means creating new instance with the same values - and the `children` is one of the values — Yaron U., Apr 21 '14 at 14:08
Cloning is by definition going to be a deep copy. Do you want a deep copy? It might be more run-time efficient to only create exactly what you need. — J E Carter II, Apr 21 '14 at 14:08
@meagar: That wouldn't copy event handlers and other data. Nor would `$( $('ul').get(0).cloneNode() )`. To do it with jQuery, the contents should first be detached. — cookie monster, Apr 21 '14 at 14:47

score 2 · Answer 1 · answered Apr 21 '14 at 14:06

2

You could empty the element:

$('ul').clone().empty();

answered Apr 21 '14 at 14:06

Jason P

26,984
3
31
45

score 0 · Answer 2 · answered Apr 21 '14 at 14:06

0

Use .html('') to empty the contents.Try this:

 $("ul").clone().html('');

Working Demo

answered Apr 21 '14 at 14:06

Milind Anantwar

81,290
25
94
125

1

If you find yourself doing this in production code, `clone` is probably the wrong method in the first place. – user229044 Apr 21 '14 at 14:09
FWIW jQuery has an `empty` method – Alessandro Vendruscolo Apr 21 '14 at 14:59

score 0 · Answer 3 · answered Apr 21 '14 at 14:09

jQuery clone method creates a deep copy of the element.

Description: Create a deep copy of the set of matched elements.

So with jQuery you want be able to get just the ul.

You have two choices:

Empty the object jQuery returns:

$('ul').clone().empty();
Use plain Javascript:

var simpleUl = $($('ul').get(0).cloneNode());

score 0 · Accepted Answer · answered Apr 21 '14 at 14:51

There are two problems with the given solutions.

They are unnecessarily inefficient by cloning all children and their data.
They use the native clone, which doesn't clone event handers and other data.

If you want to do a shallow clone with jQuery and transfer all data, detach its contents before the clone operation, then replace them after.

// Fetch the ul and detach its contents
var ul = $("ul");
var contents = ul.contents().detach();

// Do the clone, copying its data
var clone = ul.clone(true);

// Reattach the contents
ul.append(contents);

If there are multiple elements, then do this operation in a loop.

why is jquery cloning the children element also?

4 Answers4