为什么我隐藏父 div 的代码不起作用？

Question

我尝试关注here 的信息，对其进行编辑以符合我的需求，但到目前为止还没有成功。 我正在尝试隐藏具有两个子元素的父 div。父 div 是列表的一部分，都具有相同的类，每个 div 有两个子元素：输入和图像。每个输入都有一个我试图选择的唯一“data-wapf-label”，以便我可以隐藏父 div。 HTML如下：

<div class="has-pricing wapf-swatch wapf-swatch--image">
  <input type="radio" id="wapf-field-61b148f2fc8fe_lzhx7" name="wapf[field_61b148f2fc8fe]" class="wapf-input" data-field-id="61b148f2fc8fe" value="lzhx7" data-wapf-label="Peppermint Mocha" data-is-required data-wapf-pricetype-"fx">
  <img src="...">
</div>

有几个页面显示了这个产品，而不是进入并删除产品字段（因为我只需要在下个赛季再次添加它），我正在尝试创建一段代码，它将隐藏具有上述代码的所有产品的所有 div（因为每个产品都有一个唯一的“id”，我必须使用“selectElementById”为每个 id 做几次，我想避免这样做，显然）。

我安装了代码片段，但我在使用 Javascript 时遇到了一些问题。我应该添加代码片段通过 php 将代码插入网站（因此每个 sn-p 都需要 php 标签）。我已经尝试了几件事，但这是我的最新版本。它抛出一个语法错误“意外的'hideFlavors'（T_STRING），期待'（'”。 这是我的 php/Javascript 代码：

<?php
add_action( 'wp_head', function hideFlavors() { ?>
<script>
    if var peppermintMocha = document.querySelectorAll("[data-wapf-label='Peppermint Mocha']") {
    peppermintMocha.parentNode.style.display = "none"; 
    }
</script>
<?php } );

我也尝试过使用“document.querySelector”（没有“All”），但有相同或相似的问题。当我确实让代码真正通过而没有任何错误时，它仍然不能解决问题。 在这一点上，我感觉有点像《独立日》里那个透过坦克潜望镜看的家伙。不管我做什么，“目标仍然存在”。

Answer 1

<?php
add_action( 'wp_head', function() {
    ?>
        <script>
            window.onload = function() {
                document.querySelectorAll("[data-wapf-label='Peppermint Mocha']").forEach(function(el) {
                    el.parentNode.style.display = "none"; 
                });
            };
        </script>
    <?php
});
?>

querySelectorAll返回一个元素数组，所以需要循环遍历每个元素并分别隐藏其父元素。

Answer 2

而不是 querySelectorAll 使用 querySelector。然后它会工作。但请确保仅存在一个带有选择器[data-wapf-label='Peppermint Mocha'] 的输入字段。