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

Jquery – Hide the entire <div> if the <table> is empty

I have a div with a table inside.
How can I hide the div if its value is null or empty and show it again if its value is not null or empty

<div class="container" id="main_container">
    <table id="my_table" class="table table-wishlist">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody class="wishlist-page-items">
            <tr class="wishlist-page-item">
                <td class="product-col">
                    <div class="lz-place"></div>
                </td>
                <td class="price-col">
                    <div class="lz-place"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

I tried this function but I only managed to hide the div and not show it when the table is full.How could I achieve my goal either in javascript or jquery. Thanks

$(document).ready(function () {
        if ($('#main_container').val() === "") {
            //$('#main_container').hide();
            document.getElementById("main_container").style.display = "none";
            console.log("do not show")
        } else {
            //$('#main_container').hide();
            document.getElementById("main_container").style.display = "block";
            console.log("show")
        }
});
Tags:

3

Answers


  1. 0

    .val() is for getting the value of inputs, not the contents of DOM elements. Use .text() to get the text in an element. And use .trim() to remove all the surrounding whitespace.

    $("#main-container").toggle($("#main-container").text().trim() != "");

    However, the text of #main-container will include the table headings, so you should only check the table body.

    $("#main-container").toggle($("#main-container tbody").text().trim() != "");
    Login or Signup to reply.
  2. 0 
           $(document).ready(function () {
         //get main container content
         var main_container = $('#main_container').html().trim();
         if (main_container.length < 1) {
             //$('#main_container').hide();
             document.getElementById("main_container").style.display = 
             "none";
            console.log("do not show")
        } else {
           //$('#main_container').hide();
            document.getElementById("main_container").style.display = 
           "block";
            console.log("show")
         }
    });
    Login or Signup to reply.
  3. 0

    Use :empty pseudo-class. Just simple example:

    $(document).on('click', 'button', function() {
  const div = $('div');
  if ( div.is(':empty') ) {
    div.append('<table><tr><td>Table</td></tr></table>');
  } else {
    div.html('');
  }
})
    div {
  padding: 20px;
  background-color: red;
}

div:empty {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum.
<div></div>
<p>Lorem ipsum.
<p><button>Add/remove table in div</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search