nerdrocker nerdrocker - 2 months ago 10
jQuery Question

Hide button if the tree traversal can't find the element

What I'm trying to achieve is to make an if statement that checks if it can find the element and if it can't it hides a button with the class .toggle
The things is, there are multiple

.toggle
buttons on the page. They all open the closest
tr.product-info
IF available. Now I want to remove the button if the
tr.product-info
is not there. What's the best way to do this? My jQuery snippet so far:

if ($(".toggle").parents().eq(1).next(".product-info").text() === true) {
$(".toggle").show();
}
else {
$(".toggle").hide();
console.log("test");
}


Part of the HTML



<tr class="price-list">
<td class="views-field views-field-field-product-table persist essential" data-th="">
BNOR
</td>
<td class="views-field views-field-field-price-table views-align-center persist essential" data-th="">
€ 218,00
</td>
<td class="views-field views-field-field-popup-table persist essential" data-th="">
<a class="toggle" href="#" style="display: none;">Button</a>
</td>
</tr>

<tr class="product-info" style="display: none;">
<td class="explanation">
<p>Content to be displayed when clicking on Button</p>
</td>
</tr>




Answer

You will need to loop across all toggle buttons, for that you can use each():

Searching if the next TR has the class .product-info:

Check the Snippet

$(document).ready(function() {
  $('.toggle').each(function(){
    if ($(this).closest('tr').next().hasClass("product-info")) {
      $(this).show();
    } else {
      $(this).hide();
      console.log("test");
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="price-list">
    <td class="views-field views-field-field-product-table persist essential" data-th="">
      BNOR
    </td>
    <td class="views-field views-field-field-price-table views-align-center persist essential" data-th="">
      € 218,00
    </td>
    <td class="views-field views-field-field-popup-table persist essential" data-th="">
      <a class="toggle" href="#">Button</a>
    </td>
  </tr>
  <tr class="product-info">
    <td class="explanation">
      <p>Content to be displayed when clicking on Button</p>
    </td>
  </tr>
  <tr class="price-list">
    <td class="views-field views-field-field-product-table persist essential" data-th="">
      BNOR
    </td>
    <td class="views-field views-field-field-price-table views-align-center persist essential" data-th="">
      € 218,00
    </td>
    <td class="views-field views-field-field-popup-table persist essential" data-th="">
      <a class="toggle" href="#">Button</a>
    </td>
  </tr>
</table>

Searching if there is no text inside the next TR

Check the Snippet

$(document).ready(function() {
  $('.toggle').each(function(){
    if ($(this).closest('tr').next().text().trim() !== "") {
      $(this).show();
    } else {
      $(this).hide();
      console.log("test");
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="price-list">
    <td class="views-field views-field-field-product-table persist essential" data-th="">
      BNOR
    </td>
    <td class="views-field views-field-field-price-table views-align-center persist essential" data-th="">
      € 218,00
    </td>
    <td class="views-field views-field-field-popup-table persist essential" data-th="">
      <a class="toggle" href="#">Button</a>
    </td>
  </tr>
  <tr class="product-info">
    <td class="explanation">
      <p>Content to be displayed when clicking on Button</p>
    </td>
  </tr>
  <tr class="price-list">
    <td class="views-field views-field-field-product-table persist essential" data-th="">
      BNOR
    </td>
    <td class="views-field views-field-field-price-table views-align-center persist essential" data-th="">
      € 218,00
    </td>
    <td class="views-field views-field-field-popup-table persist essential" data-th="">
      <a class="toggle" href="#">Button</a>
    </td>
  </tr>
  <tr class="product-info">
    <td class="explanation">
      <p></p>
    </td>
  </tr>
</table>