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

我正在尝试在表格的每一行后面放置一个“删除”按钮。删除按钮的功能应确保只有在添加新行时才会激活。如果两行中有一行被删除，则现有行的删除按钮也应被停用。如有任何帮助，将不胜感激。谢谢

var regex=/^（[a-zA-Z0-9_-]+）$/；
var-cindex=0；
$（文档）.on（'单击'，'按钮'），函数（e）{
var count=$（'table tr:last input:text'）.filter（（2;，el）=>el.value.trim（）==“”）.length；
if（count | |！$（'select:last'）.val（））{
警报（“请填写当前行中的所有字段”）；
返回false；
}
var$tr=$（“#数据表tbody tr:last”）；
var$clone=$tr.clone（true）；
cindex++；
$clone.find（':input'）.not（'select'）.val（'.attr（'disabled'，true））；
$clone.attr（'id'，'id'+（cindex））；//如果需要，更新行id
//更新行中元素的ID
$clone.find（“*”）.each（函数（）{
var id=this.id | |“”；
如果（id！=“”）{
var match=id.match（正则表达式）| |[]；
if（match.length==2）{
this.id=匹配[1]+（cindex）；
}
}
});
$tr.after（$clone）；
}); 
/*`用于删除按钮*/
$（文档）。在（“单击“，”.DeleteButton'，函数（）上）{
$（this）.tr.remove（）；
});
/*用于启用字段*/
$（文档）。在（“单击“，”.DeleteButton'，函数（）上）{
$（this）.tr.remove（）；
});

链接
描述
形象
统一资源定位地址
挑选
向导
最新报价
模板
视频



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

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

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

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

if（计数<2）
//要禁用的代码
其他的
//要启用的代码
我不知道你的问题是否正确，但我会尽量这样做：

我会通过一个类名'active'来处理这个问题。还可以为该类设置禁用样式。如果单击按钮，我还会切换jquery的显示/隐藏功能。如果一个按钮是最后一个站着的人，我会把所有的按钮都藏起来。所以不能再点击了。如果只需要显示/隐藏按钮，也可以忽略“active”类。按钮应具有特定类别“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();

 });

使用此“我的选择”功能不起作用，如果我更改“选择”的值，相应字段应获得启用的答案谢谢。它奏效了。只需在你的答案中稍加修改。不是像if（Count<2）那样应用条件，而是应该是if（Count==2），因为在我的例子中，第一行的值总是2。