为动态添加输入行实现Remove All批量删除功能的方法

步骤1：添加「Remove All」按钮到HTML #

在页面的按钮区域（比如btnAdd、btnGet附近）添加该按钮：

<input type="button" id="btnRemoveAll" value="Remove All" />

步骤2：添加对应的jQuery事件处理 #

在现有jQuery初始化代码中，新增点击事件监听，直接清空存放动态输入行的容器#TextBoxContainer：

$("#btnRemoveAll").bind("click", function() {
  // 清空容器内所有动态生成的输入行
  $("#TextBoxContainer").empty();
});

完整修改后代码 #

$(function() {
  $("#btnAdd").bind("click", function() {
    var div = $("<div />");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);
  });
  
  $("#btnGet").bind("click", function() {
    var valuesarr = new Array();
    var phonearr = new Array();
    $("input[name=DynamicTextBox]").each(function() {
      valuesarr.push($(this).val());
    });
    $("input[name=phoneNum]").each(function() {
      phonearr.push($(this).val());
    });
    alert(valuesarr);
    alert(phonearr);
  });
  
  $("body").on("click", ".remove", function() {
    $(this).closest("div").remove();
  });
  
  // 新增的批量删除事件
  $("#btnRemoveAll").bind("click", function() {
    $("#TextBoxContainer").empty();
  });
});

function GetDynamicTextBox(value) {
  return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;<input name = "phoneNum" type="text" />&nbsp;<input type="button" value="Remove" class="remove" />';
}

补充说明 #

• $("#TextBoxContainer").empty()会直接移除容器内所有子元素，也就是所有动态添加的输入行，操作简单高效。
• 若使用jQuery 1.7及以上版本，推荐将bind替换为on写法（和单行删除事件语法保持一致）：$("#btnRemoveAll").on("click", function() { ... })

内容的提问来源于stack exchange，提问作者marco77sa