How to access paragraph inside table td using jquery

Question

I am having an issue accessing a paragraph inside a table td using jquery.

What I want to do is to hide the paragraph inside table td if the value is X for example.

This is my code. The value is being select but the hiding is not working.

var Privileges = jQuery('.woocommerce-checkout #customer_details 
   .woocommerce-billing-fields #billing_country');
    var select = this.value;
   Privileges.change(function () {
    if ($(this).val() == 'RO') {

     $( "#wc-local-pickup-plus-toggle-default-handling" ).show();
    }

   else $('#wc-local-pickup-plus-toggle-default-handling').hide();
});

Here is the inspected element image. I have no idea why its not working.

Thank You.

Answer 1

Its looking like the problem in your code is here:

if ($(this).val() == 'RO')

try changing this to

if ($(this).find(':selected').val() == 'RO')

To summarize, the listener is added to the select box, so in the listener, 'this' refers to the select element. Which doesn't have a value.

$(this).find(':selected') finds any sub element that has the "selected" property, which in this cas we know will be an option, which should have a value.

Answer 2

$("table td").children().find('p').hide();

If you added the element dynamically use the following:

Privileges.on('change', function(){  
   // your code here 
});