Need to hide parent element of inner element by using Closest-CodePudding

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

<tr>
        
<td nowrap="true" valign="top" width="113px" >
<span >
<a name="SPBookmark_PatientInitials"></a>Patient Initials</span></td>
        <td valign="top"  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();

CodePudding user response：

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/

CodePudding user response：

.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" >
    <span >
      <a name="SPBookmark_PatientInitials"></a>Patient Initials
    </span>
  </td>
  <td valign="top"  width="350px" id="SPFieldText">
    WR
  </td>
</tr>
</table>