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>
.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();