JQUERY：输入框OnChange后总价不更新及行删除功能异常排查

问题1：数量输入框修改后总金额不更新 #

问题根源 #

• 事件处理中使用全局类选择器（$(".quantity_input")、$(".price_value")、$(".total_value_row")），会选中页面上所有对应类的元素，而非当前输入框所在行的关联元素，导致计算和更新错误。
• 未处理价格/数量文本可能存在的空格，parseInt转换时容易出现异常。

修复代码 #

修改数量输入框的keyup事件处理函数：

$(document).on("keyup", ".quantity_input", function() {
  // 定位当前输入框所在的行容器
  const $parentContainer = $(this).closest(".col-md-8");
  // 获取当前输入框的数值，兜底默认值1避免非数字输入出错
  const quantity = parseInt($(this).val()) || 1;
  // 获取当前行的价格，去除空格后转换为数字，兜底默认值0
  const price = parseInt($parentContainer.find(".price_value").text().trim()) || 0;
  // 计算总金额
  const total = quantity * price;
  // 更新当前行的总金额显示
  $parentContainer.find(".total_value_row").text(`总金额：${total}`);
});

说明 #

• 用$(this)指代当前触发事件的输入框，避免全局选择带来的错误关联。
• closest(".col-md-8")精准定位到当前行的容器，确保只操作当前行的元素。
• 用trim()去除文本空格、添加默认值兜底，提升代码健壮性。

问题2：点击移除按钮无法删除对应行 #

问题根源 #

• 当前代码仅触发提示框，未实现移除行的核心逻辑。
• 生成移除按钮时重复使用id="remove_data"，违反HTML中id必须唯一的规范。
• 原HTML生成代码存在多余的</a>标签，导致DOM结构异常。

修复代码 #

1. 修正移除按钮的HTML生成逻辑（去掉重复id）

// 原按钮代码修改为：
'<button type="button" class="remove_data">Remove item</button></a>&nbsp'

2. 实现移除行的点击事件

$(document).on("click", ".remove_data", function() {
  // 定位当前按钮所在的行容器
  const $targetRow = $(this).closest(".row");
  // 移除当前行及后续的分隔线<hr>
  $targetRow.next("hr").remove();
  $targetRow.remove();
});

说明 #

• 移除重复id，保证HTML结构合规。
• closest(".row")精准定位目标行，next("hr")选中行后的分隔线一并移除，避免残留无效元素。

完整修正后的JS代码 #

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

$(document).on("keyup", ".quantity_input", function() {
  const $parentContainer = $(this).closest(".col-md-8");
  const quantity = parseInt($(this).val()) || 1;
  const price = parseInt($parentContainer.find(".price_value").text().trim()) || 0;
  const total = quantity * price;
  $parentContainer.find(".total_value_row").text(`总金额：${total}`);
});

$(document).on("click", ".remove_data", function() {
  const $targetRow = $(this).closest(".row");
  $targetRow.next("hr").remove();
  $targetRow.remove();
});

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

    var checkBoxes = grid.getElementsByTagName("INPUT");
    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;
        str +=
          '<div class="row" ><div class="col-md-8"><p class="me-3" > ' +
          '<a href="#" class="text-body">' +
          '<button type="button" class="remove_data">Remove item</button></a>&nbsp' +
          '<span>Quantity</span>&nbsp' +
          row.cells[2].innerHTML +
          "</p> " +
          '<span class="me-1">Price </span>&nbsp' +
          '<span class="me-1 price_value">' +
          row.cells[1].innerHTML +
          "</span>&nbsp" +
          '<input type="number" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/>&nbsp'+
          '<span class="total_value_row">总金额：</span>'+
          "</div></div><hr>";
        checkBoxes[i].hasCovered = true;
      }
    }
    $(".whole-div-class").append(str);
  });
});

注：修正了原HTML生成代码中多余的</a>标签，避免DOM结构错误。

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