如何使用jQuery删除动态添加的行？

Question

我试图在表格的每一行之后放置一个“删除”按钮。删除按钮应该以这样一种方式运行，即只有在添加新行时它才会被激活。 如果两行中的一行被删除，现有行的删除按钮也应该被停用。任何帮助将不胜感激。 谢谢。

 var regex = /^([a-zA-Z0-9 _-]+)$/; var cindex = 0; $(document).on('click','.Buttons', function(e) { var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length; if(count || !$('select:last').val()){ alert("Please fill all the fields in the current row"); return false; } var $tr = $('#dataTable tbody tr:last'); var $clone = $tr.clone(true); cindex++; $clone.find(':input').not('select').val('').attr('disabled', true); $clone.attr('id', 'id'+(cindex) ); //update row id if required //update ids of elements in row $clone.find("*").each(function() { var id = this.id || ""; if(id != ""){ var match = id.match(regex) || []; if (match.length == 2) { this.id = match[1] + (cindex); } } }); $tr.after($clone); }); /*`For delete button*/ $(document).on("click", '.DeleteButton', function() { $(this).closest("tr").remove(); }); /*for enable field*/ $(document).on("click", '.DeleteButton', function() { $(this).closest("tr").remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable"> <thead> <tr> <td class="headingalign" width="16%">Links</td> <td class="headingalign" width="32%">Desciption</td> <td class="headingalign" width="16%">Image</td> <td class="headingalign" width="16%">URL</td> <td class="headingalign" width="16%"></td> </tr> </thead> <tbody> <tr id="id01" name="row"> <td> <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" > <option value="">Select</option> <option value="GDS">Guides</option> <option value="LOF">Latest Offers</option> <option value="TEM">Templates</option> <option value="VID">Videos</option> </select> </td> <td> <input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" /> </td> <td> <input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" /> </td> <td> <input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" /> </td> <td> <input tabindex="6" id="Button4" value="Delete Row" disabled="true" class="DeleteButton" name="Button4" type="button" /> </td> </tr> </tbody> </table> <div class="buttonarea"> <ul> <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li> </ul> </div>

Answer 1

您可以通过以下方式在每个“添加新行”按钮和“删除行”按钮上获取表中的行数：

var Count = $('#dataTable tr').length;

然后使用Count的值，您可以启用/禁用删除按钮，例如

if(Count < 2 )
//code to disable
else
//code to enable

Answer 2

我不知道我的问题是否正确，但我会尝试这样做：

我会通过一个名为“active”的类来处理这个问题。 您还可以为此类设置禁用样式。 如果单击按钮，我也会切换 jquery 的显示/隐藏功能。 如果一个按钮是最后一个站立的人 - 我会隐藏所有。 所以不能再点击了。 如果您需要显示/隐藏按钮，您也可以忽略 'active'-Class。 这些按钮应该有一个特定的类“del-btn”。

注意：“活动”类仅用于显示按钮但禁用/启用。 显示/隐藏用于“删除”按钮。

var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
$(document).on('click','.Buttons', function(e) {
  var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
  if(count || !$('select:last').val()){
    alert("Please fill all the fields in the current row");
    return false;
  }
 var $tr    = $('#dataTable tbody tr:last');
 var $clone = $tr.clone(true);
 cindex++;
 $clone.find(':input').not('select').val('').attr('disabled', true);
 $clone.attr('id', 'id'+(cindex) ); //update row id if required
 //update ids of elements in row
 $clone.find("*").each(function() {
        var id = this.id || "";
        if(id != ""){

        var match = id.match(regex) || [];
        if (match.length == 2) {
            this.id = match[1] + (cindex);
        }
        }
});

// If you want to activate ALL buttons:
$('.del-btn').addClass('active');

// If just the added row should be active:
$clone.find('.del-btn').addClass('active');

$(".del-btn").show();

$tr.after($clone);
}); 
  /*`For delete button*/
$(document).on("click", '.DeleteButton', function() {
     if(!$(this).hasClass('active')){
        // removing is allowed
        $(this).closest("tr").remove();
        // Now you can check, if the rest should be shown or not
        var btns = $('.del-btn').length; // count the buttons in the dom
        if(btns>0){
            if(btns == 1){
               $(".del-btn").hide();
            }else{
               $(".del-btn").show();
            }
        }
     }else{
        // removing is disallowed
     }

    });
``````````````````````````for enable field``````````````````````



 $(document).on("click", '.DeleteButton', function() {
     $(this).closest("tr").remove();

 });