Question

我需要在TD元素内附加一个元素，但是在此之前，我需要删除一个元素。

这是代码：

<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>

我需要克隆输入组元素，删除“ add-repeat”小元素并将其附加到TD。

我尝试过此操作，但是它在不删除“ add-repeat”小元素的情况下追加了元素：

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

Answer 1

传递给.remove()的参数是：

选择器表达式，用于过滤要删除的匹配元素集。

您要在此处删除的元素是“匹配元素”的子元素...使用参数不直接在集合中进行过滤。

因此，您首先应该克隆.input-group ...然后.find() .add-repeat才能删除...

然后附加“克隆”。

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

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

Answer 2

您的问题在这里：

.remove('.add-repeat')

删除元素时，返回的值是元素本身。

快速更正可以是：

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

无论如何，我都会建议一个更清晰的策略：

克隆元素
删除不需要的元素
追加

$('.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>

克隆元素删除其中的另一个元素

2 个答案: