Question

这是代码。

<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();        
  }); 

 });
 });

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

现在，当我尝试逐个删除行时，它们将被删除。问题是当我尝试逐行删除行时。清除按钮应该自动隐藏，但事实并非如此。

请帮忙。

Answer 1

试试这个：

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

的 FIDDLE

Answer 2

像这样更新你的删除按钮事件 -

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

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

Answer 3

只需添加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();
    };
});

Answer 4

我建议这个

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

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

4 个答案: