Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Remove specific <option> tag from <select> array that has a specific value from a WordPress Woo commerce site – Woocommerce

I’m trying to remove a specific tag from array that has a specific value from a WordPress Woo commerce site. When I run the code in Stackoverflows code snippet the jquery executes and works as expected, but on the site it does not execute. What’s even more confusing it that if I paste the jquery into the browser > inspector > console it also executes and deletes the desired tag with the desired value.

CMS: WORDPRESS – Theme: DIVI | page builder: Elementor
CRM: Woo Commerce

jQuery(document).ready(function($) {
    if(window.location.href.indexOf("1850-aprilaire-test-progressive") >= 0) {
        $('#dehumidifier-hanger-size option[value="Large (Fits 1870 model)"]').remove();
        alert('AWESOME jquery is WORKING');
    };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="dehumidifier-hanger-size" class="" name="wccp_attribute_dehumidifier-hanger-size[1597339203]" data-attribute_name="attribute_dehumidifier-hanger-size" data-show_option_none="yes">
  <option value="">Choose an option</option>
  <option value="Regular (Fits 1820,1830,1850 models)" class="attached enabled">Regular (Fits 1820,1830,1850 models)</option>
  <option value="Large (Fits 1870 model)" class="attached enabled">Large (Fits 1870 model)</option>
</select>
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    @twisted @vmank Using a $('#id').on('load', function - to delete desired option. executes in console, but can't find desired object. returns as undefined. Obviously the entire line 2 is in the wrong place even though the code syntax in correct. can either of you help?

    jQuery(function($) {
  $('#dehumidifier-hanger-size').on('load', function() {
    if (window.location.href.indexOf("1850-aprilaire-test-progressive") >= 0) {
      var el = $("#dehumidifier-hanger-size option[value^='Large']");
      console.log("Found Element", el[0]);
      el.remove();
    } else {
      console.log("Not the correct page.");
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<select id="dehumidifier-hanger-size" class="" name="wccp_attribute_dehumidifier-hanger-size[1597339203]" data-attribute_name="attribute_dehumidifier-hanger-size" data-show_option_none="yes">
  <option value="">Choose an option</option>
  <option value="Regular (Fits 1820,1830,1850 models)" class="attached enabled">Regular (Fits 1820,1830,1850 models)</option>
  <option value="Large (Fits 1870 model)" class="attached enabled">Large (Fits 1870 model)</option>
</select>


  2. 0

    I would try something a bit more loose. Maybe you’re being too specific.

    jQuery(function($) {
  if(window.location.href.indexOf("1850-aprilaire-test-progressive") >= 0) {
    var el = $("#dehumidifier-hanger-size option[value^='Large']");
    console.log("Found Element", el[0]);
    el.remove();
  } else {
    console.log("Not the correct page.");
  }
});

    If you see undefined in console, then you missed the selection. If you see <option... you hit the right thing.

    Login or Signup to reply.
  3. 0

    Have you tried something like this? Using a load event handler in most of the cases solves the problem because probably this field is created after the ready event, hence you see the selector working through the console but not inside your ready handler.

    jQuery( document ).ready( function($) {

  $( document ).on( 'load', function() {
    $('#dehumidifier-hanger-size option[value="Large (Fits 1870 model)"]').remove();
    alert('AWESOME jquery is WORKING');
  });
  
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="dehumidifier-hanger-size" class="" name="wccp_attribute_dehumidifier-hanger-size[1597339203]" data-attribute_name="attribute_dehumidifier-hanger-size" data-show_option_none="yes">
  <option value="">Choose an option</option>
  <option value="Regular (Fits 1820,1830,1850 models)" class="attached enabled">Regular (Fits 1820,1830,1850 models)</option>
  <option value="Large (Fits 1870 model)" class="attached enabled">Large (Fits 1870 model)</option>
</select>
    Login or Signup to reply.
  4. 0

    @twisted @vmank So, GOOD NEWS!!! Got the jquery to work on Chrome/FF/IE/OPR!!!! BAD NEWS: Doesn’t work on Safari. Can either of you point me in the right direction?

    BTW, thanks for all your help. REALLY appreciate it!!!

    jQuery(document).ready(function($) {
    if(window.location.href.indexOf("1850-aprilaire-test") >= 0) {
        $( document ).on( 'click', '#dehumidifier-hanger-size', function()  {
                var el = $('#dehumidifier-hanger-size option[value^="Large"]');
                el.attr('disabled','disabled');
                console.log("Found Element", el[0]);
        });
        } else {
        console.log("Not the correct page.");
    }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<select id="dehumidifier-hanger-size" class="" name="wccp_attribute_dehumidifier-hanger-size[1597339203]" data-attribute_name="attribute_dehumidifier-hanger-size" data-show_option_none="yes">
  <option value="">Choose an option</option>
  <option value="Regular (Fits 1820,1830,1850 models)" class="attached enabled">Regular (Fits 1820,1830,1850 models)</option>
  <option value="Large (Fits 1870 model)" class="attached enabled" disabled="disabled">Large (Fits 1870 model)</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search