JQUERY中如何一键删除所有添加行并取消复选框勾选？

核心问题分析 #

1. 重复ID违反HTML规范：你在添加行时给每个生成的<div>都加了id="row"，但HTML里ID必须是唯一的。用$("#row")只会选中第一个匹配的元素，所以只能删除一行，而非全部。
2. 复选框状态重置不彻底：你只重置了第一个复选框的hasCovered属性，其他被标记过的复选框没处理，导致下次添加时无法重复选中之前的项。

修复代码 #

1. 修改添加行的代码（去掉重复ID）

把生成行的HTML里的id="row"删掉，只保留类名class="row"：

str +=
  '<div class="row" data-for="' + checkBoxes[i].id + '"><div class="col-md-8"><p class="me-3"> ' +
  '<a href="#" class="text-body">' +
  '<button type="button" class = "remove_data" id="remove_data">Remove item</button></a>&nbsp' +
  // 后续代码保持不变

2. 修复「删除全部」按钮的点击事件

用类选择器选中所有添加的行，遍历所有相关复选框重置状态：

$(document).on("click", "#remove_all", function() {
  // 移除所有添加的行
  $(".whole-div-class .row").remove();
  
  // 重置表格中所有非全选复选框的状态
  $('input[type="checkbox"]').not('#allcb').each(function() {
    $(this).prop('checked', false);
    this.hasCovered = false;
  });
  
  // 同时重置全选框的选中状态
  $('#allcb').prop('checked', false);
});

完整修改后的JS代码 #

$("#allcb").change(function() {
  $('tbody tr td input[type="checkbox"]').prop(
    "checked",
    $(this).prop("checked")
  );
});

// 修复后的删除全部逻辑
$(document).on("click", "#remove_all", function() {
  $(".whole-div-class .row").remove();
  
  $('input[type="checkbox"]').not('#allcb').each(function() {
    $(this).prop('checked', false);
    this.hasCovered = false;
  });
  
  $('#allcb').prop('checked', false);
});

$(document).on("keyup", ".quantity_input", function() {
  var $row = $(this).closest('.row');
  var value_input = 0;
  var price_value = 0;
  var total_value = 0;

  value_input = $(".quantity_input", $row).val();
  price_value = $(".price_value", $row).html();
  total_value = parseInt(value_input) * parseInt(price_value);
  $(".total_value_row", $row).text(total_value);
});

$(document).on("click", ".remove_data", function() {
  var $row = $(this).closest('.row');
  var checkboxName = $row.data('for');
  var $checkbox = $(`input[type="checkbox"][name="${checkboxName}"]`);
  
  $row.remove();
  $checkbox.prop('checked', false);
  $checkbox.get(0).hasCovered = false;
});

$(document).ready(function() {
  $("#add_data").click(function() {
    var grid = document.getElementById("Table1");
    var checkBoxes = grid.getElementsByTagName("INPUT");
    var str = ''

    for (var i = 0; i < checkBoxes.length; i++) {
      if (
        checkBoxes[i].checked &&
        checkBoxes[i].name !== "allcb" &&
        !checkBoxes[i].hasCovered
      ) {
        var row = checkBoxes[i].parentNode.parentNode;
        // 去掉重复的id="row"
        str +=
          '&lt;div class="row" data-for="' + checkBoxes[i].id + '">&lt;div class="col-md-8"&gt;&lt;p class="me-3"&gt; ' +
          '&lt;a href="#" class="text-body"&gt;' +
          '&lt;button type="button" class = "remove_data" id="remove_data"&gt;Remove item&lt;/button&gt;&lt;/a&gt;&amp;nbsp' +

          '&lt;span&gt;Quantity&lt;/span&gt;&amp;nbsp' +
          row.cells[2].innerHTML +
          "&lt;/a&gt;&lt;/p&gt; " +
          '&lt;span class="me-1"&gt;Price &lt;/span&gt;&amp;nbsp' +
          '&lt;span class="me-1 price_value"&gt;' +
          row.cells[1].innerHTML +
          "&lt;/span&gt;&amp;nbsp" +
          '&lt;input type="number" id="quantity_input" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/&gt;&amp;nbsp' +
          '&lt;span class= "total_value_row" &gt;total value is&lt;/span&gt; ' +
          "&lt;/div&gt;&lt;hr&gt;&lt;/div&gt;";
        checkBoxes[i].hasCovered = true;
      }
    }
    $(".whole-div-class").append(str);
  });
});

修复逻辑说明 #

• 用.whole-div-class .row选中所有添加的行，确保一次性删除全部。
• 用each()遍历所有非全选的复选框，逐个重置checked和hasCovered状态，保证下次添加功能正常。
• 移除重复ID，符合HTML标准，避免后续其他选择器出现异常。

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