JQuery Select closest form element and remove class
<p class="align-with-aes">
<a class="with-icon manage-link active" href="#">
Manage Reference
</a>
</p>
<form method="post" class="updateForm hide" novalidate="novalidate">
<p class="align-with-aes">
<a class="with-icon add-new-line" id="add-line" href="#add-new-line">
<i class="icon-add-inv"></i>Add new Reference
</a>
</p>
<div class="row ref-update-button">
<div class="span6">
<button class="submitReference loadRef btn" id="submitReference"><i class="icon-submit"></i>Submit Reference</button>
</div>
</div>
</form>
JQuery
$( ".manage-link" ).click(function() {
$(this).parent().closest('form').removeClass('hide');
});
here i am tring to get the closest form when i click the link having the class name "manage-link" It doesn't work. Am I doing something wrong here?
source to share
Since your link and form are not in the same part of the DOM tree, you can do a global search as well $('form')
. Most other solutions will not carry forward future changes to the DOM structure.
eg.
$('form').removeClass('hide')
The best options are:
1) If you need multiple forms on the page, add a parent div that surrounds both branches and use closest()
to access that element and then the find()
form inside it.
<div class="formwrapper">
<p class="align-with-aes"> <a class="with-icon manage-link active" href="#">
Manage Reference
</a>
</p>
<form method="post" class="updateForm hide" novalidate="novalidate">
...
</form>
<div>
and use
$(this).closest('.formwrapper').find('form').removeClass('hide');
or 2) add identifying information to the link so that it knows what the linked form is. In this example, I add an attribute data-form=".updateForm"
containing a selector:
<div class="formwrapper">
<p class="align-with-aes"> <a class="with-icon manage-link active" href="#" data-form=".updateForm">
Manage Reference
</a>
</p>
<form method="post" class="updateForm hide" novalidate="novalidate">
...
</form>
<div>
and use with:
$($(this).data('form')).removeClass('hide');
source to share
This form is not the parent of the clicked element:
$(this).closest('p').siblings('form').removeClass('hide');
use .closest()
instead .parent()
, because if your markup gets changed anyway (if existing elements are wrapped in other elements like span / strong) then you don't need to worry about it.
use .siblings()
as the parent of the clicked item is sibling.
source to share