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. stackoverflow.com/questions/1518216/… — MichaelJ
– MichaelJ, Commented Feb 11, 2021 at 3:31
The order of php tags is opposite in the provided code. Make sure that's correct. — Pranav Rustagi
– Pranav Rustagi, Commented Feb 11, 2021 at 3:52
plz check this answer I hope that is helpful stackoverflow.com/a/61886123/11954917 — Makwana Prahlad
– Makwana Prahlad, Commented Feb 11, 2021 at 4:32
What exactly do you want to achieve? Is there any error thrown on running the given code? — Nico Haase
– Nico Haase, Commented Feb 11, 2021 at 10:16

Andrei Filonov · Accepted Answer · 2021-02-11 03:44:06Z

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

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.

Collectives™ on Stack Overflow

Remove Item from Select Box

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related