thornomad thornomad - 1 year ago 79
Javascript Question

Finding child elements of a cloned element in jQuery

I don't know why I'm stuck on this but I am! Trying to clone a

div
and then modify its contents using
children
in jQuery. I am missing something here because it's not working as I would expect. See fiddle: http://jsfiddle.net/v7A2T/

Javascript (jQuery):

$test = $('#clone-container').clone().appendTo('#append');
$test.children('h2').text('my clone'); // works
$test.children('.remove-row').remove(); // doesn't work


And the HTML:

<div id="clone-container" class="hidden">
<h2>Location name</h2>
<div class="table-responsive">
<table class="table">
<thead>
<th>one</th><th>two</th><th>three</th>
<th>four</th><th>five</th><th>six</th>
</thead>
<tbody>
<tr class="remove-row"><td colspan="6">Remove this text from clone</td></tr>
</tbody>
</table>
</div> <!-- .table-responsive -->
</div>
<div id="append"></div>

Answer Source

Fiddle

.remove-row is not a direct child of the cloned element. Replace this:

$test.children('.remove-row').remove();

with this:

$test.find('.remove-row').remove();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download