Javascript 如何在jQuery中一次性关闭动态添加的字段

这是我的小提琴

这是代码

<table id="table"></table>
<input type="button" id="addRowBtn" style="border-style: none;  cursor: pointer; 
                                                            background: #FFFFFF; color:  #023a6d;" value="Add Search Field">

<input style="display: none; margin-right: 552px; margin-left: 10px; float:  left;background:#00c800; border: 1px solid #00c800; color:#FFF; font-size: 14px;" type="button" id="delall" value="Clear">


$(document).ready(function () { 
$(function(){

var tbl = $("#table");

$("#addRowBtn").click(function(){
   if($("tr.tre").length<5)
       $("<tr class='tre'><td><select ><option>AND</option><option>OR</option> <option>NOT</option></select></td><td><input type='text' /></<td><td>&nbsp;in&nbsp;</td><td><select><option>title</option><option>All Fields</option><option>Authors</option></select></td><td><a class='delRowBtn'><input type='button' value='delete'></a></td></tr>").appendTo(tbl);  
    if($("tr.tre").length>2){
        $('#delall').show();
    } 


});


 $('#delall').click(function(){
      $(".tre").remove(); 
      $('#delall').hide();
   });

$(document.body).delegate(".delRowBtn", "click", function(){
    $(this).closest("tr").remove();        
  }); 

 });
 });

$（文档）.ready（函数（）{
$（函数（）{
变量tbl=$（“#表”）；
$（“#addRowBtn”）。单击（函数（）{
如果（$（“tr.tre”）.长度2）{
$（'#delall'）.show（）；
} 
});
$（'#delall'）。单击（函数（）{
$（“.tre”）.remove（）；
$（'#delall'）.hide（）；
});
$（document.body）.delegate（“.delRowBtn”，“click”，function（））{
$（this）.tr.remove（）；
}); 
});
});

当我单击添加搜索时，字段行将动态添加到最多5行（有限）。 当行数超过两个时，将出现清除按钮

现在，当我试图一行一行地删除这些行时，它们被删除了。问题是当我试图一行一行地删除到最后一行时。i清除按钮应自动隐藏，但不是

请帮助。

试试这个：

$(document.body).delegate(".delRowBtn", "click", function(){
        $(this).closest("tr").remove();
        if($("tr.tre").length<3){
            $('#delall').hide();
        }
    });

$（document.body）.delegate（“.delRowBtn”，“click”，function（））{
$（this）.tr.remove（）；
如果（$（“tr.tre”）.length像这样更新删除按钮事件-

$(document.body).delegate(".delRowBtn", "click", function(){
        $(this).closest("tr").remove();  

        //hide clear button        
        if($("tr.tre").length<3){
            $('#delall').hide();
        }
    });

$（document.body）.delegate（“.delRowBtn”，“click”，function（））{
$（this）.tr.remove（）；
//隐藏清除按钮
if（$（（“tr.tre”）.length只需添加一个if条件

$(document.body).delegate(".delRowBtn", "click", function(){

    $(this).closest("tr").remove();        
    if($('#table tr').length == 0){ // your table rows if 0 then clear button disabled
     $('#delall').hide();
    };
}); 

我建议这样做

$('#delall').toggle($("tr.tre").length>2)

切换按钮，将visible>what your want作为最小值传递