Clone an element without the children in jQuery

Question

I have a table and I want to clone it without its children. Note that I simplified the markup for brevity, the table has many properties and event handlers which I also want to copy.

<table data-x="..." class="a b c">
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    .
    .
    .
</table> 

I don't want to copy all then delete the children afterwards, I'm not sure but I think it's not efficient.

Answer 1

I don't think you can clone just the element without it's children using jQuery but you can do that with plain JavaScript. node.cloneNode(). This won't copy attached event listeners

cloneNode