你可以这样做：

if (document.getElementsByClassName("bookPrice") != null) {
  const priceParent = document.querySelectorAll('.priceParent');
  
  priceParent.forEach((item) => {
    const priceTag = item.querySelector('.priceTag');
    const price = item.querySelector('.price');
    
    if (price.textContent === 'Free')
        priceTag.style.display = "none";
  });
}

<div class="priceParent">
<div class="priceTag">$</div>
<div class="price">Free</div>
</div>

<div class="priceParent">
<div class="priceTag">$</div>
<div class="price">60</div>
</div>

getElementsByClassName()returns an array-like list，您需要迭代它以便与每个元素交互。类似的函数是querySelectorAll()，下面是如何访问所选项目的示例：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#accessing_the_matches

• 这两个函数的结果之间的显着差异是getElementsByClassName返回一个实时HTMLCollection，而querySelectorAll返回一个静态NodeList。*

我还调整了display属性，使tag/price彼此相邻显示，并添加了另一个类，通过CSS类而不是内联样式来切换。

if (document.getElementsByClassName("bookPrice") != null) {
  let priceParents = document.querySelectorAll('.priceParent');
  
  priceParents.forEach((parent) => {
    let priceTag = parent.querySelector('.priceTag');
    let price = parent.querySelector('.price');
    
    if (price.textContent == "Free") {
      priceTag.classList.add('hidden');
    }
  });

}

.priceParent div {
  display: inline-block;
}

.priceTag.hidden {
  display: none;
}

<div class="priceParent">
  <div class="priceTag">$</div>
  <div class="price">Free</div>
</div>

<div class="priceParent">
  <div class="priceTag">$</div>
  <div class="price">60</div>
</div>

我想问题可能出在你的变量上。你把价格变量定义为：getElementsByClassName（“price”），变量将被转换为一个列表，因为您的代码告诉程序抓取多个项目。正因为如此，你写if语句的方式，它检查price变量，就好像它是一个常规变量，而不是一个列表。要解决这个问题，您可以添加一个for循环，遍历price list中的所有项目，并检查每个项目的索引是否具有等效值“Free”。