使用querySelector移除列表元素时选择器无效的问题解决

我制作了一个包含计数器与按钮的网页：点击Increment按钮，计数器加1并添加列表项；点击Decrement按钮，计数器减1并移除最后添加的列表项。计数器增减和列表项添加功能正常，但使用querySelector通过data-counter属性选择元素时，出现“[data-counter = 1]不是有效选择器”的DOM错误，相关代码如下：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Counter-1: <span id="counter-one">0</span></h1>
    <button id="increment">Increment Number</button>

    <button id="decrement">Decrement Number</button>

    <ul id="list-items"></ul>

    <script src="script.js" type="text/javascript"></script>
  </body>
</html>

JavaScript代码 #

const incrementButton = document.getElementById("increment");
const decrementButton = document.getElementById("decrement");
const listOfItems = document.getElementById("list-items");

const counterValue = document.getElementById("counter-one");
let counter = 0;

function incrementValue() {
  counter++;
  counterValue.innerText = counter;

  //add a list item
  const li = document.createElement("li");
  li.innerHTML = "<b>Something</b> " + counter;
  li.setAttribute("data-counter", counter);
  listOfItems.appendChild(li);
  console.log(li);
}

function decrementValue() {
  counter--;
  counterValue.innerText = counter;
  //remove a list item
  const li = listOfItems.querySelector("[data-counter = " + counter + "]");

  li.remove();
}

incrementButton.addEventListener("click", incrementValue);
decrementButton.addEventListener("click", decrementValue);

问题根源 #

1. 选择器格式错误：拼接的选择器[data-counter = 1]不符合CSS规范，虽然数字属性值可不用引号，但这种写法易引发解析错误，规范的属性选择器需给属性值添加引号（如[data-counter="1"]）。
2. 逻辑顺序错误：点击Decrement时先将counter减1，再查找对应新counter值的元素，但最后添加的列表项data-counter实际是减1之前的counter值，会导致找不到元素报错。

修正后的代码 #

const incrementButton = document.getElementById("increment");
const decrementButton = document.getElementById("decrement");
const listOfItems = document.getElementById("list-items");

const counterValue = document.getElementById("counter-one");
let counter = 0;

function incrementValue() {
  counter++;
  counterValue.innerText = counter;

  const li = document.createElement("li");
  li.innerHTML = "<b>Something</b> " + counter;
  li.setAttribute("data-counter", counter);
  listOfItems.appendChild(li);
}

function decrementValue() {
  // 防止counter变为负数，同时避免空列表时执行删除操作
  if (counter <= 0) return;
  
  // 使用模板字符串生成规范的属性选择器
  const li = listOfItems.querySelector(`[data-counter="${counter}"]`);
  
  if (li) {
    li.remove();
    // 先删除元素再更新counter，逻辑与添加操作匹配
    counter--;
    counterValue.innerText = counter;
  }
}

incrementButton.addEventListener("click", incrementValue);
decrementButton.addEventListener("click", decrementValue);

关键改动说明 #

• 用模板字符串拼接选择器，给data-counter的属性值添加双引号，确保选择器格式完全符合CSS规范，避免解析错误。
• 调整Decrement执行顺序：先查找并删除对应当前counter值的列表项，再更新counter数值，保证与添加逻辑对应（最后添加项的data-counter就是当前counter值）。
• 增加边界判断：当counter为0时直接返回，防止出现负数counter，同时避免空列表时执行删除操作引发的报错。

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