堆棧內存溢出
  簡體   English   中英

JQuery remove（）無法正常工作

[英]JQuery remove () not working properly

 原文  2016-07-25 09:05:15  5   10    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 個解決方案

解決方案1
 1 已采納  2016-07-25 09:14:16

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

解決方案2
 1  2016-07-25 09:16:55

您需要對代碼進行一些修改。 您應該將計算基於表中當前存在的行數，而不是保留變量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>

解決方案3
 1  2016-07-25 09:21:30

如果首先單擊它，則刪除按鈕有效。 您遇到的問題是正確跟蹤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>

解決方案4
 0  2016-07-25 09:10:50

問題是這行$("#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

解決方案5
 0  2016-07-25 09:12:11

我想以下代碼可能比提供的結構更清晰。 如果您的按鈕是同一行的一部分，則可以通過調用此方法並將該行傳遞給該方法來完成

JS函數刪除行 

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

調用函數

您可以在此處動態創建刪除按鈕和表格本身 

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

解決方案6
 0  2016-07-25 09:14:33

我早點減量： 

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

解決方案7
 0  2016-07-25 09:16:19

在嘗試刪除時，你已經逐漸增加了i +++ 

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

所以它增加了i值，同時試圖刪除顯然ID不會在那就是為什么這個問題你可以這樣嘗試 

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

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

解決方案8
 0  2016-07-25 09:19:23

可能有幫助的例子 

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

解決方案9
 0  2016-07-25 09:19:58

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

解決方案10
 0  2016-07-25 09:35:42

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery添加/刪除類無法正常工作 使用jQuery刪除HTML標簽 JQuery 添加/刪除 class 在 Chrome Mobile 上無法正常工作 jQuery動畫無法正常工作 jQuery ajax無法正常工作 jQuery Index（）無法正常工作？ jQuery滑塊無法正常工作？ jQuery .find無法正常工作 XPage中的Jquery無法正常工作 Jquery Json無法正常工作
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM