I'm about lose my mind with this problem.   No form of jQuery selector seems to work in dynamically finding any elements above the link.  I'm trying to access an element above the link and hide it.   Using things like parent(), prev(), before(), closest(), ect. will show a non-null object but it won't respond to the hide() method.  I don't get any errors, but nothing responds.

[code]

<div class="row">

<div class="col-xs-5">

<div id="test_fields">

<li id="test_input" class="string input optional stringish">

<label class="label" for="test_input">Ingredient name</label>

<input type="text" name="test_input" value="afsfasf" id="test_input">

</li>

     </div>

     <input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">

<a href="javascript:void(0)" id="test_link" css_class="small" onclick="javascript:remove_fields(this)">Remove Ingredient</a>

   </div>

</div>

[/code]

[code]

function remove_fields(link) {

  $(link).prev("input[type=hidden]").val('1'); // this doesn't work

  

  var divToHide = $(link).prev('div');

  

  $(divToHide).hide() // this doesn't work

  //$('#test_fields').hide(); //this works

}

[/code]