Medium页面JS代码求助：按子元素条件删除article元素

我看了你写的代码，问题不少，咱们一步步捋清楚，然后给你一个可靠的解决方案：

你的代码里的核心问题 #

1. 选择器用错方法：你用了document.getElementById()，但传入的是类名"svgIcon svgIcon--star svgIcon--15px"——这个方法只能通过元素的id属性查找，类名得用querySelector或者querySelectorAll才行。
2. 拼写错误+DOM遍历硬编码：你写的prentNode是拼写错误（应该是parentNode），而且硬写一堆parentNode完全不可靠——Medium的页面结构随时可能变，层数一变你的代码就失效了。
3. 变量初始化错误：var i = O;这里的O是字母O，不是数字0，循环根本不会正确执行。
4. 循环逻辑不合理：固定循环100次毫无意义，应该根据实际找到的目标元素数量来处理，多了少了都不对。

修正后的可行代码 #

直接用下面这段代码，逻辑更简洁可靠：

// 找到所有带有星形图标的SVG元素（匹配类名）
const starIcons = document.querySelectorAll('.svgIcon.svgIcon--star.svgIcon--15px');

// 遍历每个星形图标，找到它所属的article并删除
starIcons.forEach(icon => {
  // 向上查找最近的article父元素，不管中间有多少层DOM
  const targetArticle = icon.closest('article');
  if (targetArticle) {
    targetArticle.remove();
  }
});

代码说明 #

• querySelectorAll('.svgIcon.svgIcon--star.svgIcon--15px')：准确选中所有同时拥有这三个类的SVG元素，类名前的.是CSS类选择器的规则。
• closest('article')：这是DOM API里非常实用的方法，会从当前元素开始向上遍历DOM树，找到最近的<article>祖先元素，完全不用关心中间有多少层父节点，比硬写一堆parentNode稳定太多。
• forEach遍历所有找到的星形图标，逐个处理，不管页面里有多少个目标元素都能覆盖到。

你把这段代码注入到页面里，应该就能正常删除那些带星形图标的article元素了。

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