Question 36943 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Need to hide parent element of inner element by using Closest – Jquery

Need to hide parent element of inner element with name attribute by using closest as shown

<tr>
        
<td nowrap="true" valign="top" width="113px" class="ms-formlabel">
<span class="ms-h3 ms-standardheader">
<a name="SPBookmark_PatientInitials"></a>Patient Initials</span></td>
        <td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
        
            WR
                
            
        </td>
    </tr>

example is as below

.closest("tr> td span a ").attr('name', 'SPBookmark_' + ctx.ListSchema.Field[0].Name).hide();
Tags:

2

Answers


  1. 0

    Assuming I understand what you are asking for, you can use the CSS attribute selector to achieve your goal (thanks to Scott for pointing out this is CSS not jQuery in the comments). Take this example:

    $("#hideParent").click(function(){
  $(".inner[name='foo']").closest('.outer').hide()
})
$("#showParent").click(function(){
  $(".inner[name='foo']").closest('.outer').show()
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='outer'>
  <div class='inner' name='foo'>
  Sample
  </div>
</div>

<button id="hideParent">Hide Parent</button>
<button id="showParent">Show Parent</button>

    See the docs for more info: https://api.jquery.com/attribute-equals-selector/

    Login or Signup to reply.
  2. 0

    .closest() should be called on the inner element and be supplied a valid CSS selector that should match some ancestor element. Your code:

    .closest("tr> td span a ")

    looks like it’s trying to find what your code has as the inner element by starting at the ancestor and working downward..

    // Assuming that the <a> element is the current node...
let current = document.querySelector("a[name='SPBookmark_PatientInitials']");
current.closest("tr").classList.add("hidden");
    .hidden {display:none;}
    <table>
<tr>
  <td nowrap="true" valign="top" width="113" class="ms-formlabel">
    <span class="ms-h3 ms-standardheader">
      <a name="SPBookmark_PatientInitials"></a>Patient Initials
    </span>
  </td>
  <td valign="top" class="ms-formbody" width="350px" id="SPFieldText">
    WR
  </td>
</tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search