Question

I have created a function called billingOptions() it is associated with a dropdown (select) element. When a user selects an option in the dropdown the function is run.

The dropdown will dynamically be added through the page…each time adding the billingOptions() function onChange. I am trying to use Jquery to find the closest instance of the class=rate from the dropdown that was changed. Keep in mind that the dropdowns are added dynamically so there could possible be many instances of .rate…

I have tried using “this” and “closest” to find the nearest class (i’m not even sure you can use a class with the closest function). Here is some code:

***I was asked to provide the exact structure of the HTML (the rows of the table are dynamically generated. The table is static).

<table id="billTasks"> 
<tr> <input class="taskNameInput" type="text" size="52" placeholder="Task Name" name="task:1" disabled="disabled"> <select class="billOptions" onchange="billingOptions(this)">
<option class="fixedRate">Bill Fixed Rate</option>
<option class="hourly">Bill Hourly</option>
</select> 
<input type="text" name="fixedRate" placeholder="Rate" class="fieldWidth100 rate"/> 
</tr> 
</table>

function billingOptions(){
 $(this).closest('.rate').hide();
}

***EDIT: this code does not work. The goal is to hide the input.rate element.

Answer 1

Edit: First off, you are half-right about your concern that this is not being passed to the function. It is being passed, but it is not being used. Give your function a named parameter, and reference that instead of this:

function billingOptions(el)
{
    $(el).something()...
}

Is .rate always the next element? If so:

$(el).next(".rate").hide();

Is .rate always a sibling? Will there only ever be one .rate sibling? If so:

$(el).siblings(".rate").hide();

Will .rate share a common parent with your select, and be the only instance of .rate in that common parent? If so:

$(el).closest(".commonParentClassName").find(".rate").hide();

If none of these works for you, please provide more detail on the structure of you HTML.

Edit: Thanks for posting the structure of your HTML. You are missing <td> in your HTML. Assuming your real code includes the <td>, and assuming there is only one .rate per row, try this:

function billingOptions(el)
{
    $(el).closest("tr").find(".rate").hide();
}