JQuery remove（）无法正常工作

时间：2016-07-25 09:05:15

标签： javascript jquery html css html5

我正在尝试使用JQuery创建一个动态表，其中单击一个按钮来添加和删除行。 

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var i = 2;
      $("#btn1").click(function() {
        $("table").append("<tr id='r" + i + "' ><td>" + i+++"<td><input type='text' /></td></tr>");
      });

      $("#btn2").click(function() {
        if (i > 2) {
          $("#r" + i).remove();
          i--;
        } else {
          alert("Row Cannot Be Deleted !");
        }
      });
    });
  </script>
</head>

<body>
  <form>
    <table border="1">
      <tr>
        <td>1</1>
          <td>2</td>
      </tr>
    </table>
  </form>
  <button id="btn1">Add Item</button>
  <button id="btn2">Delete Item</button>

</body>

</html>

首次点击删除按钮似乎无法正常工作。 只有计数器“i”减1，但没有删除行。 因此，添加项目时，“＃”将始终与之前的项目相同。我无法弄清楚我正在做什么来获得这样的结果。

10 个答案:

答案 0 :(得分：1)

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var i = 1;
        $("#btn1").click(function() {
        i++;
        $("table").append("<tr id='r" + i + "' ><td>" + i +"<td><input type='text' /></td></tr>");
      });


      $("#btn2").click(function() {
        if (i > 2) {
          $("#r" + i).remove();
          i--;
        } else {
          alert("Row Cannot Be Deleted !");
        }
      });
    });
  </script>
</head>

<body>
  <form>
    <table border="1">
      <tr>
        <td>1</1>
          <td>2</td>
      </tr>
    </table>
  </form>
  <button id="btn1">Add Item</button>
  <button id="btn2">Delete Item</button>

</body>

</html>

答案 1 :(得分：1)

您需要对代码进行一些修改。您应该将计算基于表中当前存在的行数，而不是保持变量i来跟踪最新的行ID。这比使用变量跟踪它更加可靠和灵活。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn1").click(function() {
        var i = $("#mytable tr").length + 1;
        $("table").append("<tr id='r" + i + "' ><td>" + i + "<td><input type='text' /></td></tr>");
      });

      $("#btn2").click(function() {
        var i = $("#mytable tr").length;
        if (i > 1) {
          $("#r" + i).remove();
        } else {
          alert("Row Cannot Be Deleted !");
        }
      });
    });
  </script>
</head>

<body>
  <form>
    <table id="mytable" border="1">
      <tr>
        <td>1</1>
          <td>2</td>
      </tr>
    </table>
  </form>
  <button id="btn1">Add Item</button>
  <button id="btn2">Delete Item</button>

</body>

</html>

答案 2 :(得分：1)

如果首先单击它，则删除按钮有效。您遇到的问题是正确跟踪i变量的状态，这就是为什么这种模式比它值得更痛苦的原因。

从代码的外观来看，您需要做的就是确保表中至少有一行。如果是这样，您只需点击删除按钮即可查看当前表格中tr元素的数量，如下所示：

$(document).ready(function() {
  $("#btn1").click(function() {
    var $tr = $('table tr');
    $tr.last().after("<tr><td>" + ($tr.length + 1) + "<td><input type='text' /></td></tr>");
  });

  $("#btn2").click(function() {
    var $tr = $('table tr');
    if ($tr.length > 1) {
      $tr.last().remove();
    } else {
      alert("Row cannot be deleted!");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table border="1">
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </table>
</form>
<button id="btn1">Add Item</button>
<button id="btn2">Delete Item</button>

答案 3 :(得分：0)

问题在于此行$("#r" + i).remove();

您需要将其更改为(i-1) 

 $("#btn2").click(function() {
      console.log(i)
        if (i > 2) {
          $("#r" + (i-1)).remove(); // changed here
          i--;
        } else {
          alert("Row Cannot Be Deleted !");
        }
      });
    });

JSFIDDLE

答案 4 :(得分：0)

我猜以下代码可能比提供的结构更清晰。 如果您的按钮是同一行的一部分，则可以通过调用此方法并将该行传递给方法

来完成

JS功能删除行 

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('Yourtable').deleteRow(i);
}

调用函数

这是您在表格本身动态创建删除按钮的地方

deletebtn.onclick = function() {
        deleteRow(this);
    };

答案 5 :(得分：0)

我早点减量：

$("#btn2").click(function() {
    if (i > 2) {
      i--;
      $("#r" + i).remove();
    } else {
      alert("Row Cannot Be Deleted !");
    }
  });

答案 6 :(得分：0)

在尝试删除时，你已经逐渐增加了i +++ 

 <td>" + i+++"<td>

所以它增加了i值，同时试图删除显然ID不会存在那就是为什么这个问题你可以尝试这样 

 $("#r" + (i-1)).remove();

for refrence https://plnkr.co/edit/IxnGt0PVMoXiS5lj6g0Q?p=preview

答案 7 :(得分：0)

可能有帮助的例子

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn1").click(function() {
        var next = $('table tr').length + 1;
        $("table").append("<tr id='r" + next + "' ><td>"+ next +"<td><input type='text' /></td></tr>");
      });

      $("#btn2").click(function() {
          $("table tr:last()").remove();
      });
    });
  </script>
</head>

<body>
  <form>
    <table border="1">
      <tr>
        <td>1</1>
        <td><input type="text"/></td>
      </tr>
    </table>
  </form>
  <button id="btn1">Add Item</button>
  <button id="btn2">Delete Item</button>

</body>

</html>

答案 8 :(得分：0)

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var i = 2;
      $("#btn1").click(function() {
        $("table").append("<tr id='r" + i + "' ><td>" + i+++"<td><input type='text' /></td></tr>");
      });

      $("#btn2").click(function() {
        if (i > 2) {
          $("#r" + (i-1)).remove();
          i--;
        } else {
          alert("Row Cannot Be Deleted !");
        }
      });
    });
  </script>
</head>

<body>
  <form>
    <table border="1">
      <tr>
        <td>1</1>
          <td>2</td>
      </tr>
    </table>
  </form>
  <button id="btn1">Add Item</button>
  <button id="btn2">Delete Item</button>

</body>

</html>

答案 9 :(得分：0)

$(document).ready(function () {
        var i = 1;
        $("#btn1").click(function () {
            i++;
            $("table").append("<tr id='r" + i + "' ><td>" + i + "<td><input type='text' /></td></tr>");

        });

        $("#btn2").click(function () {
            if (i > 1) {

                $("#r" + i).remove();
                i--;
            } else {
                alert("Row Cannot Be Deleted !");
            }
        });
    });
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <form>
    <table border="1">
        <tr>
            <td>
                1</1>
            <td>
                2
            </td>
        </tr>
    </table>
    </form>
    <button id="btn1">
        Add Item</button>
    <button id="btn2">
        Delete Item</button>
</body>
</html>

相关问题
最新问题