Jquery Select closest Form element and remove Class

Question

   <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 on a link having class name "manage-link" this is not working. am I doing anything wrong here ?

Answer 1

That form is not the parent of clicked element:

$(this).closest('p').siblings('form').removeClass('hide');

use .closest() instead of .parent() because if in any case your markup gets changed (if existing elems get wrapped in other elems like span/strong) you don't have to worry about that.

use .siblings() because parent of the clicked element is the sibling.