I want to hide div if html data is empty, I want to show if it is not. HTML JavaScript

Question

When I select from list, I am getting stock data from controller and display on the page. But, I want to hide this "We have products in stock" writing firstly, I want to show "We have 26 products in stock" after I select from list and the value come from controller. Either I could show complete writing or I could hide complete writing. I could not show it depends on stock value.

Create.cshtml

 <div id="hide">
            <label>We have <text id="stock"></text> products in stock</label>
        </div>
 $.ajax({
            success: function (data) {
                $("#stock").html(data);
                }
        });
<script>
        if ($('#stock').val().length == null) {
            $('#hide').hide();
        }
        else {
            $('#hide').show();
        }
    </script>

My script codes are wrong.

Answer 1

You can achieve this by following code.

 <div id="hide">
            <label>We have <text id="stock"></text> products in stock</label>
        </div>

<script>
         $.ajax({
            success: function (data) {
               if(data){
                     $("#stock").html(data);
               }
               else{
                   $('#hide').hide();
               }
            }

        });
    </script>

The thing is, you need to check data is empty or not. So when the ajax is completed, you should check the data. I don't know the exact model what's you returning but the logic should be like this.

Answer 2

将if（$（'＃stock'）。val（）。length == null）{更改为if（！$。trim（$（'＃stock'）。html（））.length）{