CODEWITHSUNDEEP
jqueryappend
Giacomo M
Giacomo M

Reputation: 4711

clone element removing another element inside it

I need to append an element inside TD element, but before doing that I need to remove one element.

This is the code:

<td>
<div class="col-4 input-group input-group-sm bootstrap-timepicker">
    <input type="text" class="form-control timepicker">
    <div class="input-group-append">
        <span class="input-group-text"><i class="fa fa-clock-o"></i></span>
    </div>
    <small class="add-repeat"><a class="text-underline cursor-pointer">Add</a></small>
</div>
</td>

I need to clone input-group element, remove "add-repeat" small element and append it to the TD.

I tried with this, but it append the element without removing the "add-repeat" small element: 

$('.add-repeat').click(function() {
    $(this).closest('td').append($(this).closest('.input-group').clone(true).remove('.add-repeat'));
});

Upvotes: 0

Views: 22

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

Your issue is here:

.remove('.add-repeat')

When you remove an element the value returned is the element itself.

A fast correction can be:

$(this).closest('td').append($(this).closest('.input-group').clone(false)
        .find('.add-repeat').addBack().remove().eq(0));

In any case I would suggest a more clear strategy:

  • clone element
  • remove unwanted elements
  • append

$('.add-repeat').click(function() {
    var ce = $(this).closest('.input-group').clone(false);
    ce.find('.add-repeat').remove();
    $(this).closest('td').append(ce);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <tbody>
    <tr>
        <td>
            <div class="col-4 input-group input-group-sm bootstrap-timepicker">
                <input type="text" class="form-control timepicker">
                <div class="input-group-append">
                    <span class="input-group-text"><i class="fa fa-clock-o"></i></span>
                </div>
                <small class="add-repeat"><a class="text-underline cursor-pointer">Add</a></small>
            </div>
        </td>
    </tr>
    </tbody>
</table>

Upvotes: 1

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

The agument passed to .remove() is:

A selector expression that filters the set of matched elements to be removed.

The element you wish to remove here is a child of the "matched elements"... It's not directly in the collection to filter using the argument.

So you first should clone the .input-group... Then .find() the .add-repeat in order to remove...

Then append the "clone".

$('.add-repeat').click(function() {
  var clone = $(this).closest('.input-group').clone(true);
  clone.find('.add-repeat').remove();

  $(this).closest('td').append(clone);
});

Upvotes: 1

Related Questions