从 Select 盒子中取出物品

Question

I'm trying to remove an item (value=155 / 'Fruits') from a select box drop down.

    <div class="control select">
      <select id="product_cat"
        name="product_cat[]"
        class="category-select2 select2-hidden-accessible"
        style=""
        data-parsley-maxcheck="3"
        multiple=""
        data-parsley-multiple="product_cat[]"
        tabindex="-1"
        aria-hidden="true"
      >
        <option class="level-0" value="115">Misc</option>
        <option class="level-0" value="161">Vegetables</option>
        <option class="level-0" value="160">Grains</option>
        <option class="level-0" value="155">Fruits</option>
        <option class="level-1" value="156">&nbsp;&nbsp;&nbsp;Apples</option>
        <option class="level-1" value="157">&nbsp;&nbsp;&nbspBananas</option>

I'm using Wordpress and after many attempts I haven't been able to remove it from the dropdown. For example, I've tried the following JS code in my function.php file:

    function customcats_hook_javascript() {
        ?>
            <script>
    var select = document.getElementById('product_cat')
    select.removeChild(select.querySelector('option[value="155"]'))
            </script>
        <?php
    }
    add_action('wp_head', 'customcats_hook_javascript');

Answer 1

There is possibly a problem with your script executed in before all body elements are available. Normally you need to wait until HTML is processed and DOM is complete. One possibility is moving script to the end of the page, somewhere in the footer. Ideally need to wait until page loads, with jQuery loaded you can use

jQuery('document').ready(function(){
// your code here
});