JQuery的删除（）无法正常工作

问题描述：

我想创建使用JQuery，当一个按钮被点击添加和删除行的动态表。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，但没有行被删除。因此，添加项目时，“＃”将始终与前面的项目相同。我无法弄清楚为了得到这样的结果我做了什么错误。

尝试使用''.on（'click'，function（）{// something}'' – Tauras

答

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

答

的问题是这一行$("#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

如果（i> 2）必须是if（i> = 2）匹配从第一次删除 – MoustafaS

我试图替换e我的你的建议，但是，它似乎并没有工作 –

我附加了一个jsfiddle检查 – brk

答

我想，下面的代码可能会在提供结构的清洁版本。如果你的按钮是同一行的一部分，您可以通过调用该方法，并把该行的方法

JS功能删除该行做

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

调用功能

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

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

答

只是递减我迟早：

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

答

insitaily试图删除已alreay递增我+++

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

所以它提高了我的值，而试图显然删除ID不会在那里，为什么这个问题你可以尝试这样

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

做参考https://plnkr.co/edit/IxnGt0PVMoXiS5lj6g0Q?p=preview

答

您需要进行一些修改代码。而不是保持变量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>

我只是新的HTML和JQuery的世界。我会考虑下一次这样做。感谢您的帮助 –

@SaharAlsadah好的。此解决方案是否适合您？ –

是的，它是完美的工作，谢谢 –

答

例子，可以帮助

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

答

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

答

删除按钮的工作原理。你所遇到的问题是正确地跟踪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>

这效果很好，除了whille删除，即使留下一个可删除的行，它也开始抛出警告。假设除了标题以外的所有行都可以被删除。 –

你的表没有标题？你的意思是表中至少应该有一行，而不是两行？如果是的话，我更新了你的答案 –

对不起，我不是OP。但你可以尝试运行你的代码。添加第一行（它将有数字2）。现在，尝试删除它。 –

答

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

JQuery的删除（）无法正常工作

相关推荐