如何从包含特定类的页面中删除所有元素

Question

我想打印我的 LinkedIn 个人资料 (https://www.linkedin.com/in/peterhorniak/) 作为我的简历。我已经通过 Chrome 控制台使用单独的 JQuery 行删除了一些不需要的元素，例如以下示例：

• $('.header').remove();
• $('.topcard__connections').remove();
• $('.li-footer').remove();

该网页有一个项目部分，其中包含许多空白肖像。我想删除所有的肖像元素。我可以单独这样做，例如这些示例：

• document.querySelector("body > main > div.core-rail > section > section.projects.pp-section > ul > li:nth-child(27) > ul").remove();
• document.querySelector("body > main > div.core-rail > section > section.projects.pp-section > ul > li:nth-child(28) > ul").remove();

这样的元素有 20 多个。如何以编程方式删除满足以下条件的所有元素？

 1. they are part of the section <section class="projects pp-section" data-section="projects">
 2. they are part of an unordered list <ul class="projects__list">
 3. they are one of the list elements <li class="projects__project">
 4. within that list element, they are in the unordered list <ul class="face-pile__list projects-face-pile__list">

我正在运行 Chrome 版本 76.0.3809.100（官方版本）（64 位）。

我尝试过基于this question 进行循环。因为类里面有空格，并且基于this question，所以我把它当作两个类来处理。

var projects = document.getElementsByClassName("face-pile__list", "projects-face-pile__list");
while (projects.length)
    projects[0].classList.remove("face-pile__list", "projects-face-pile__list");

我希望这会从每个元素中删除肖像。相反，它给出了“未定义”的输出。

Answer 1

确保在调用这些函数之前加载了项目部分。 由于 Linkedin 使用延迟加载，除非您打开项目部分 手动不会在页面上加载任何信息

function removeCreators() {
    const projectSection = document.querySelector('.pv-profile-section.pv-accomplishments-block.projects');
    const contributorsSections = projectSection.querySelectorAll('a[data-control-name="project_contributors"]');
    contributorsSections.forEach( x => x.remove() );
};

function removeEmptyCreatorsImages() {
  const projectSection = document.querySelector('.pv-profile-section.pv-accomplishments-block.projects');
  const emptyContributors = projectSection.querySelectorAll('img.ghost-person');
  emptyContributors.forEach( x => x.remove() );
}