Hide children of the siblings of grand parent in jQuery

user_680074 0
Viewed 38

I need to hide the children of siblings of the grand parent. I am stuck in complex situation where I have three <li> inside the <ul> . Now the structure of the html looks like this

<ul>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>

inside each li this is the html

      <div class="chbs-vehicle chbs-clear-fix">

         <div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
            </div>
            <div class="chbs-vehicle-content">                
                <div class="chbs-vehicle-content-header"> 
                    <span>Sedan</span>                        
            <a href="#" class="chbs-button chbs-button-style-2">
                Select
                <span class="chbs-meta-icon-tick"></span>
            </a>                       
               </div>                   
            <div class="chbs-vehicle-content-price">€42.00</div>                
            </div>
            </div>

So when I click on the chbs-button-style-2 I want to hide chbs-vehicle-content-price div inside all the other li which are the children of siblings of grandparent of this.

this is I where I am stuck

<script type="text/javascript">

jQuery(document).ready(function($){

      $('.chbs-button-style-2').on('click', function() {

       alert($(this).closest('li').siblings().children().find('.chbs-vehicle-content-price').html());
       //Here I am getting Undefined

    });
   });
   
</script>
html jquery javascript
1 Answers

Use the .hide() method:

jQuery(document).ready(function($) {
  $('.chbs-button-style-2').on('click', function() {
    $(this).closest('li').siblings().children().find('.chbs-vehicle-content-price').hide();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="chbs-vehicle chbs-clear-fix">

      <div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
      </div>
      <div class="chbs-vehicle-content">
        <div class="chbs-vehicle-content-header">
          <span>Sedan</span>
          <a href="#" class="chbs-button chbs-button-style-2">
                Select
                <span class="chbs-meta-icon-tick"></span>
            </a>
        </div>
        <div class="chbs-vehicle-content-price">€42.00</div>
      </div>
    </div>
  </li>
  <li>
    <div class="chbs-vehicle chbs-clear-fix">

      <div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
      </div>
      <div class="chbs-vehicle-content">
        <div class="chbs-vehicle-content-header">
          <span>Sedan</span>
          <a href="#" class="chbs-button chbs-button-style-2">
                Select
                <span class="chbs-meta-icon-tick"></span>
            </a>
        </div>
        <div class="chbs-vehicle-content-price">€42.00</div>
      </div>
    </div>
  </li>
  <li>
    <div class="chbs-vehicle chbs-clear-fix">

      <div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
      </div>
      <div class="chbs-vehicle-content">
        <div class="chbs-vehicle-content-header">
          <span>Sedan</span>
          <a href="#" class="chbs-button chbs-button-style-2">
                Select
                <span class="chbs-meta-icon-tick"></span>
            </a>
        </div>
        <div class="chbs-vehicle-content-price">€42.00</div>
      </div>
    </div>
  </li>
</ul>

user_142512210
Related