CODEWITHSUNDEEP
javascriptjqueryclonechildren
thornomad
thornomad

Reputation: 6797

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>

Upvotes: 3

Views: 9085

Answers (2)

musicnothing
musicnothing

Reputation: 3985

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

Fiddle

Upvotes: 7

M J
M J

Reputation: 2991

Lets say i have cloned a TR and i want to search a button in the TD of the TR then i can do like this. The button has the class "green". 

var tr = $(this).closest("tr").clone();
tr.children().find('button.green').hide(); // or show

Upvotes: 1

Related Questions