2

I tried following the information here, editing it to match my needs, but so far it's not working. I'm trying to hide a parent div with two child elements. The parent div is part of a list, all with the same classes, and each div has two child elements: an input, and an image. Each input has a unique "data-wapf-label" that I'm trying to select so that I can hide the parent div. The HTML is as follows:

<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>

There are several pages where this product shows up, and rather than going in and deleting the product field (because I'll just have to add it again next season), I'm trying to create a piece of code that will hide all the divs for all the products that have the above code (since each has a unique "id", I'd have to do it several times for each id using "selectElementById", and I'd like to avoid doing that, obviously).

I installed Code Snippets, but I'm having a bit of trouble with the Javascript. I should add that Code Snippets inserts code to the website via php (so php tags are required with every snippet). I've tried several things, but this is my latest version. It throws a syntax error "unexpected 'hideFlavors' (T_STRING), expecting '('". Here's my php/Javascript code:

<?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 } );

I've also tried it with "document.querySelector" (without the "All"), but with the same or similar problem. When I do get the code to actually go through without any errors, it still doesn't fix the problem. At this point, I feel a little like the guy looking through the tank's periscope on "Independence Day". No matter what I do, "target remains".

Sherman
  • 45
  • 6

2 Answers2

2
<?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 returns an array of elements, so you need to loop through each element and hide their parent respectively.

Leyiang
  • 530
  • 4
  • 7
  • So it would be: `` `` ` – Sherman Jan 15 '22 at 17:41
  • Tried that, but I still got a syntax error: "unexpected '?> ', expecting ')'" because it's within that php add_action function. – Sherman Jan 15 '22 at 19:46
  • Following the script I saw [here](https://stackoverflow.com/questions/1045845/how-to-call-a-javascript-function-from-php) I decided to try this: `add_action( 'wp_head', 'hideFlavors'); function hideFlavors(){ echo ''; }` And while it didn't throw any errors, it still didn't work. – Sherman Jan 15 '22 at 20:10
  • The error that you encountered is from my solution, I've updated my answer and let me know if that works :) – Leyiang Jan 16 '22 at 08:23
  • FYI: Javascript might not be the best solution for you problem. You will notice that the element that you want to hide will show first, and then being hide by the above javascript code. Users can notice the little jump there. If you want to prevent this, the best way should be using PHP. – Leyiang Jan 16 '22 at 08:39
  • It's working!!! Thank you SO MUCH! – Sherman Jan 16 '22 at 14:06
0

Instead querySelectorAll use querySelector. Then it would be work. But make sure that exists only one input field with the selector [data-wapf-label='Peppermint Mocha'].

Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
  • 1
    There is only one input field on each product page with that selector, so I would think ".querySelector()" would work, but I haven't been able to get it to work that way either. – Sherman Jan 15 '22 at 17:40