删除按钮功能异常（疑与querySelector相关）求助

先看控制台报错：Uncaught TypeError: Cannot read properties of null (reading 'remove')，本质是你用document.querySelector查找元素时返回了null，调用remove()才触发了错误，核心问题和修复方法如下：

核心问题 #

1. 纯数字类名不符合CSS规范：你用1、2这类纯数字当元素类名，但CSS选择器里类名不能以数字开头，导致.row.username.1这种选择器无法被浏览器识别，自然找不到目标元素。
2. 重复绑定点击事件：每次点击submit按钮，都会给所有.trash元素重新绑定一次点击事件，一个按钮会被绑定多次。第一次点击删掉元素后，后续触发的事件因为元素已经不存在，直接报错。
3. 索引计算不统一：你分别用.row.username和.row.expDate的长度计算索引，删掉其中一个元素后，两者长度不一致，后续添加的元素索引会乱套，没法对应到正确的删除目标。

修复后的代码 #

JavaScript 代码 #

const addbtn = document.querySelector(".newuser");
const addUserInp = document.querySelector(".addUser");
const submitbtn = document.querySelector(".submit");
const userNameInput = document.querySelector(".usernamekey.adduserinp");
const expDateInput = document.querySelector(".expdatekey.adduserinp");
const rowz = document.querySelector(".rows");

submitbtn.addEventListener("click", function() {
  // 统一用用户标题的数量计算索引，保证成对元素索引一致
  const userCount = document.querySelectorAll(".usernum").length + 1;
  const indexClass = `user-${userCount}`;
  let un = userNameInput.value;
  let ed = expDateInput.value;

  // 插入新用户的所有元素，使用统一的索引类名
  const newUserHTML = `
    <h2 class="usernum ${indexClass}">User ${userCount} </h2>
    <div class="row username ${indexClass}">
      <p><img src="profile-user.png" alt=""> 
      <img class="verticalline" src="icons8-vertical-line-100.png" alt="">${un}</p>
    </div>
    <div class="row expDate ${indexClass}">
      <p>
        <img src="icons8-date.gif" alt=""> 
        <img class="verticalline" src="icons8-vertical-line-100.png" alt="">${ed}
      </p>
    </div>
    <img src="icons8-edit-30.png" alt="" class="edit ${indexClass}">
    <img src="trash.png" alt="" class="trash ${indexClass}">
  `;
  rowz.insertAdjacentHTML("beforebegin", newUserHTML);

  // 只给刚新增的删除按钮绑定事件，避免重复绑定
  const newTrash = document.querySelector(`.trash.${indexClass}`);
  newTrash.addEventListener("click", function() {
    // 一次性删除所有带该索引类的元素
    document.querySelectorAll(`.${indexClass}`).forEach(el => el.remove());
  });

  // 清空输入框，方便下次输入
  userNameInput.value = "";
  expDateInput.value = "";
});

关键修改说明 #

• 规范类名格式：把纯数字类名改成user-1、user-2这种字母开头的格式，符合CSS选择器要求，确保能正确找到目标元素。
• 避免重复绑定：只给刚添加的删除按钮绑定点击事件，不会出现一个按钮被多次绑定的情况。
• 统一索引计算：用用户标题.usernum的数量计算索引，确保每一组用户相关元素的索引完全一致，不会因为删除操作导致索引混乱。
• 批量删除关联元素：通过统一的索引类名，一次性删除所有关联的用户元素，逻辑更简洁。

额外优化建议 #

可以把每个用户的所有元素（标题、用户名、有效期、编辑/删除按钮）包裹在一个父容器里，比如：

<div class="user-item ${indexClass}">
  <!-- 这里放用户的所有元素 -->
</div>

这样删除时直接删掉这个父容器就行，不用遍历多个元素，代码会更简洁。另外可以添加输入验证，确保用户名和有效期不为空时再创建元素，避免生成空条目。

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