Question

我有一个表单，我想允许用户添加任意数量的字段，然后将他们提供给我的信息插入到数据库中。如果有任何未使用的行，可以通过单击删除文本来删除它们，这样我的数据库中就没有一堆空行。

我已经完成了使用jQuery添加行并将数据插入数据库，但我正在努力删除不需要的行。当jQuery运行remove（）函数时，它只是给tr一个无显示的显示，以便用户看不到行，但它们仍然存在并在我的数据库中插入空行。有没有办法完全摆脱我的表中的整行，以便无法输入空白数据？

这是我的代码：

HTML

<table width="960px" border="0" id="entries">
<tr>
  <td><b></b></td>
  <td><b>Department</b></td>
  <td><b>Class</b></td>
  <td><b>Lot #</b></td>
  <td><b>Short Description</b></td>
</tr>

<tr>
  <td><b>1</b></td>
  <td class="firstEntry"><input type="text" name="fields[]"></td>
  <td><input type="text" name="class[]"></td>
  <td><input type="text" name="lot[]" size="5"></td>
  <td><input type="text" name="description[]" size="86"></td>
  <td></td>
</tr>

<div id="container">
<p id="add_field"><a href="#"><span>Add Entries.....</span></a></p>

jQuery的：

<script type="text/javascript">
var count = 0;
$(function(){
    var count = 1;
    $('p#add_field').click(function(){

        count +=1;

    $('table#entries').append(
        '<tr><td><strong>' + count + '</strong></td>' + 
        '<td><input id="department_' + count + '" name="fields[]' + '" type="text" /></td>' +
        '<td><input id="class_' + count + '" name="class[]' + '" type="text" /></td>' +
        '<td><input id="lot_' + count + '" name="lot[]' + '" type="text" size="5"/></td>' +
        '<td><input id="description_' + count + '" name="description[]' + '" type="text" size="86"/></td>' +
        '<td><span class="delete">Remove</span></td></tr>' );

     $(".delete").click(function () {
      $(this).closest('tr').remove("slow");
    });

    });



});

Answer 1

它的工作没有“慢”：

    $(".delete").click(function () {
        $(this).closest('tr').remove();
    });

http://jsfiddle.net/kn3eB/

.remove()的参数是一个选择器。你可能会想到.hide()需要持续时间的速度。

Answer 2

.remove()不会将动画效果作为参数，只会选择一个选择器。也许你会把它与.fadeOut()混淆，这会改变不透明度和显示属性？

试试 jsFiddle example

$(this).closest('tr').fadeOut(function () {
    $(this).remove()
});

jQuery remove（）不会删除

2 个答案: