Remove Item from Select Box

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');

If using jQuery, please check this solution. https://stackoverflow.com/questions/1518216/jquery-remove-options-from-select — MichaelJ, Feb 11 '21 at 03:31
The order of php tags is opposite in the provided code. Make sure that's correct. — Pranav Rustagi, Feb 11 '21 at 03:52
plz check this answer I hope that is helpful https://stackoverflow.com/a/61886123/11954917 — Makwana Prahlad, Feb 11 '21 at 04:32
What exactly do you want to achieve? Is there any error thrown on running the given code? — Nico Haase, Feb 11 '21 at 10:16

score 0 · Answer 1 · answered Feb 11 '21 at 03:44

0

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

answered Feb 11 '21 at 03:44

Andrei Filonov

814
6
8

This works, but unfortunately it seems to conflict with the off-canvas mobile navigation of my website. After implementing your code, the nav menu won't pop-out on mobile devices. – ballofwax Feb 12 '21 at 05:38

Remove Item from Select Box

1 Answers1