如何删除通过Document Fragment创建的所有表格行？

问题描述 #

通过Document Fragment动态创建HTML表格行并封装在getLocation函数中，但每次调用该函数（比如点击刷新按钮）时，都会重复生成表格行，需要在创建新行前删除已存在的对应行。

解决方案 #

在AJAX请求成功后、生成新表格行之前，清空目标容器内的现有内容即可避免重复。最直接高效的方式是使用jQuery的empty()方法，它会移除目标元素的所有子节点。

同时可以优化代码中的细节问题：

• 将locationData从全局数组改为局部对象（用let声明），避免全局变量污染
• 循环变量i添加let声明，避免全局作用域冲突

修改后的完整代码 #

let getLocation = () => {
  $.ajax({
    url: "./libs/php/getAllLocations.php",
    type: "GET",
    dataType: "json",
    success: function (result) {
      console.log("Locations");
      console.log(result);

      if (result["status"]["code"] == 200) {
        // 关键操作：清空容器内现有行，避免重复添加
        $("#fetchLocation").empty();
        
        var frag = document.createDocumentFragment();

        // 循环变量添加let声明，限定作用域
        for (let i = 0; i < result["data"].length; i++) {
          // 改用对象存储数据，替代原数组（数组不适合存键值对结构）
          let locationData = {};

          locationData["id"] = result["data"][i]["id"];
          locationData["location"] = result["data"][i]["name"];
          var row = document.createElement("tr");
          var loc_name = document.createElement("td");
          var loc_button = document.createElement("td");

          var edit_button = document.createElement("button");
          var edit_button_i = document.createElement("i");
          var delete_button = document.createElement("button");
          var delete_button_i = document.createElement("i");

          edit_button.setAttribute("type", "button");
          edit_button.setAttribute("data-bs-toggle", "modal");
          edit_button.setAttribute("data-bs-target", "#editLocationModal");
          edit_button.setAttribute("data-id", locationData["id"]);
          delete_button.setAttribute("type", "button");
          delete_button.setAttribute("id", "deleteLocationBtn");
          delete_button.setAttribute("data-id", locationData["id"]);
          delete_button.setAttribute(
            "data-name",
            locationData["location"].replace(/\s+/g, "-"),
          );

          loc_name.classList = "align-middle w-100 text-nowrap";
          loc_button.classList = "text-end btn-group";
          edit_button.classList = "btn btn-primary btn-sm";
          delete_button.classList = "btn btn-primary btn-sm";
          edit_button_i.classList = "fa-solid fa-pencil fa-fw";
          delete_button_i.classList = "fa-solid fa-trash fa-fw";
          row.setAttribute("id", locationData["id"]);

          var loc_name_text = document.createTextNode(locationData["location"]);
          loc_name.append(loc_name_text);
          loc_button.append(edit_button);
          loc_button.append(delete_button);
          edit_button.append(edit_button_i);
          delete_button.append(delete_button_i);
          row.append(loc_name);
          row.append(loc_button);

          frag.append(row);
        }

        $("#fetchLocation").append(frag);
      }
    },

    error: function (jqXHR, textStatus, errorThrown) {
      console.error("AJAX Error:", textStatus, errorThrown);
    },
  });
};

刷新按钮代码保持不变：

$("#refreshBtn").click(function () {
  getLocation();
});

原理说明 #

$("#fetchLocation").empty()会彻底移除#fetchLocation容器内的所有子元素（即之前生成的表格行），之后再添加新生成的Document Fragment内容，就能保证每次调用函数时都是全新的表格行，不会出现重复问题。

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