Question

我使用输入字段动态创建下一个类，但是当我想删除上一行时 - 我什么都没得到。可能是什么问题？

我的javascript代码如下：

$(document).ready(function(){
    $("#add_row").click(function(){
        var newCommercial = $("<div class='singleCommercial'><div class='form-group'><input class='datetimepicker'></div>");
        newCommercial.appendTo($('#listOfCommercials'));

        newCommercial.find('.datetimepicker').val(dd+"/"+mm+"/"+yy+" "+time).datetimepicker();
    });

    $("#delete_row").click(function() {
        $(this).closest('.singleCommercial').remove();

    });
});

可以在我的小提琴中看到整页：http://jsfiddle.net/7yd5o63q/12/

谢谢！

Answer 1

closest用于选择最近的祖先。您感兴趣的元素不是按钮的祖先。

在您的情况下，您想删除 last 元素，您可以使用:last选择器，也可以使用last()。

您的标记中还有重复的标识singleCommercial。这不是有效的HMTL，你可以删除它。如果您愿意，可以将其用作课程。

Demo

$(document).ready(function() {
  $("#add_row").click(function() {
    var newCommercial = $("<div class='singleCommercial'><div class='form-group'><input class='datetimepicker'></div>");
    newCommercial.appendTo($('#listOfCommercials'));

    // newCommercial.find('.datetimepicker').val(dd + "/" + mm + "/" + yy + " " + time).datetimepicker();
  });

  $("#delete_row").click(function() {
    $('.singleCommercial:last').remove();
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="listOfCommercials">
  <div id="singleCommercial">
    <div class="form-group">
      <input type='text' class="form-control datetimepicker" id='datetimepicker' name="appearanceDate0" />
    </div>
  </div>
</div>
<button id="add_row" class="btn btn-default">Add Row</button>
<button id="delete_row" class="btn btn-default">Delete Row</button>

Answer 2

我想你要删除你要附加div的列表中的最后一个.singleCommercial元素。

你应该试试

$("#delete_row").click(function() {
    $('#listOfCommercials > .singleCommercial').last().remove();
});

jQuery中的.closest()函数选择作为当前元素的父祖先的元素。由于#delete_row变量引用的元素this无法使用.singleCommercial fn找到.closest()，因为它不是其父级，并且位于不同的层次结构中，因此返回一组空的jQuery对象，没有任何东西被删除。

如何实现这一目标，您可以删除#listOfCommercials块中的最后一个元素。或者您可以在.singleCommercial中添加删除按钮，然后使用.closest()以便删除整个块。

更新了演示小提琴，仅删除#listOfCommercials div块

中的最后一个元素

http://jsfiddle.net/zmL7j3xL/1/

为什么方法nearest（）在我的javascript代码中找不到最接近的类？

2 个答案: