无法编辑HTML时，如何用JavaScript移除指定父元素下的首个目标子元素

要精准移除ext_ui_section_items容器内的第一个ext_ui_dropdown_item ext_ui_dropdown_item--light子元素，你需要限定查找范围在父容器内部，而不是全局搜索所有匹配元素。之前的代码问题在于getElementsByClassName会返回页面上所有符合类名的元素，无法区分父容器。

你可以用以下代码实现需求：

// 获取目标父容器（取第一个匹配的容器，若页面有多个可调整索引）
const parentContainer = document.querySelector('.ext_ui_section_items');
if (parentContainer) {
  // 在父容器内查找第一个目标子元素
  const firstChildToRemove = parentContainer.querySelector('.ext_ui_dropdown_item.ext_ui_dropdown_item--light');
  // 找到元素后移除
  if (firstChildToRemove) {
    firstChildToRemove.remove();
  }
}

代码说明： #

• document.querySelector('.ext_ui_section_items')：获取页面上第一个ext_ui_section_items容器，比getElementsByClassName更简洁，返回单个元素而非集合。
• parentContainer.querySelector(...)：只在父容器的范围内查找第一个匹配ext_ui_dropdown_item.ext_ui_dropdown_item--light的子元素，避免误操作其他区域的同类型元素。
• 两层判断确保元素存在时再执行移除，避免报错。

如果你的页面可能存在多个ext_ui_section_items容器，需要处理所有容器的第一个子元素，可以用循环：

// 获取所有父容器
const parentContainers = document.querySelectorAll('.ext_ui_section_items');
parentContainers.forEach(container => {
  const firstChild = container.querySelector('.ext_ui_dropdown_item.ext_ui_dropdown_item--light');
  if (firstChild) {
    firstChild.remove();
  }
});

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