Hide Div If Value Is Blank (Javascript)

Hide DIVs when a value is null or empty

This code will hide the empty fields (including their labels) when the content is empty. This code will hide the email Heading with an empty value.

let empty = document.querySelectorAll('.row > div');
empty.forEach(function(element) {
  if (element.textContent === '') {    element.previousElementSibling.style.display = 'none';    element.style.display = 'none';  }});

<div class="row">  <div class="col"><strong>Address</strong></div>  <div class="col-3">Beverly Hills 90210</div>  <div class="col"><strong>Phone</strong>:</div>  <div class="col-7">+1 1 11111111</div>  <div class="col"><strong>Email</strong>:</div>  <div class="col-8"></div></div>

hide div if value is blank (javascript)

What you need is if

(persoane.length === 0) {
    document.getElementById('containerAgenda').style.display = 'none';
  } else {
    document.getElementById('containerAgenda').style.display = 'block';
  }

inside deseneazaTabel function

I also added deleteAll functionality which was missing from your question please check demo

var persoane = [];


function deseneazaTabel() {  if (persoane.length === 0) {    document.getElementById('containerAgenda').style.display = 'none';  } else {    document.getElementById('containerAgenda').style.display = 'block';  }  str = "";  for (var i = 0; i < persoane.length; i++) {    str += `<tr>                            <td>${persoane[i].name}</td>                            <td>${persoane[i].telefon}</td>                            <td><span class="editButton" onclick="editeaza();">EDIT</span></td>                            <td><span class="deleteButton" onclick="deleteRow(${i});">STERGE</span></td>                            </tr>`;  }  document.querySelector("table tbody").innerHTML = str;}
function DeleteALL() {  persoane = [];  deseneazaTabel();}var pers = {};
function adaugaContact(form, event) {  event.preventDefault();  var inputs = form.querySelectorAll("input[name]");  for (var i = 0; i < inputs.length; i++) {    var a = inputs[i].getAttribute("name");    var v = inputs[i].value;    pers[a] = v;  }  persoane.push(pers);  document.querySelector("#containerAgenda").classList.remove("hidden");  deseneazaTabel();}
function deleteRow(idx) {  persoane.splice(idx, 1);  if (document.querySelectorAll("input[name]").value === "") {    document.querySelector("#containerAgenda").classList.add("hidden");  }  deseneazaTabel();}

<body onload="deseneazaTabel();">  <h1>AGENDA</h1>  <form class="orangeText centerText" onsubmit="adaugaContact(this,event);">    <label for="name">Nume</label>    <input type="text" name="name" id="name">    <label for="telefon">Telefon</label>    <input type="text" name="telefon" id="telefon">    <br/>    <input type="submit" class="btn" value="ADAUGA CONTACT">  </form>  <input type="submit" class="btn" onClick="DeleteALL()" value="Delete ALL">  <div id="containerAgenda" class="orangeText centerText hidden">    <table id="inputs">      <thead>        <tr>          <td>Nume</td>          <td>Telefon</td>          <td></td>          <td></td>        </tr>      </thead>      <tbody>      </tbody>    </table>  </div></body>
</html>

Hide div, if the div is empty

No JS needed - just change display property's value in this CSS declaration block:

.HEADER:empty { 
    grid-area: HEADER; 
    display: none;
}

Look at this fiddle:
https://jsfiddle.net/j8avxm1k/

If you type or put anything in the div.HEADER it will be visible again

EDIT

Personally I prefer good old fashioned "float" property instead of using this "reinventing the wheel" kind of methods, nevertheless in order to answer your question in the comment:

Reset the grid-template-rows property and set the .HEADER height in it's declaration to desired size, like so:

.MAIN-grid-container {
/* ... */
grid-template-rows: auto 640px 300px 100px;
/* ... */
}

.HEADER { 
/* ... */
height: 100px;
/* ... */
}

How can we hide div if it is blank?

You should be able to go throuh your elements like this:

$('.innerBoxContent').each(function() {
    var noContent = 0;
    var count = $(this).children().length;
    $(this).children().each(function() {
        if ($(this).html == '') {
            ++noContent;
        }
    });
    if (noContent === count) {
        $(this).hide();
    }
});

The above takes into consideration that each innerBoxContent can have several children and that some might be empty, and some might not.

It's untested and I wouldn'y be surprised if there is a smarter way to do it :)

Hide div when input is empty

Here is a very simple way of doing what you want using jquery:

$('#search-input').on('input', function() {  $('#search-result-container').css('display', $(this).val()  !== '' ? 'block' : 'none')});

#search-result-container {  display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input id ="search-input"><div id="search-result-container">This will be hidden</div>

Hide a div if content is empty

Use jQuery's :empty selector:

$('.philosophy-bubble:empty').hide();

Here's a working fiddle.

Alternative

You could also use the filter() function to find all empty div's and hide:

//All divs
$('div').filter(function() {
        return $.trim($(this).text()) === ''
}).hide()

//div's with a certain class
$('.philosophy-bubble').filter(function() {
        return $.trim($(this).text()) === ''
}).hide()

//div with a specific ID
$('#YourDivID').filter(function() {
        return $.trim($(this).text()) === ''
}).hide()

..etc.

Note: the :empty selector will be more performant. See jsPerf.

How to hide an element or div if a string is null?

First try to understand the difference between null & 'null'.

null : null is used to represent the absence of some value.

descriptionString = null;if (descriptionString != null) {    document.getElementById('image-description').style.display = 'block';} else {    document.getElementById('image-description').style.display = 'none';}

<div id="image-description">Image </div>

Hide div if value null in vue.js laravel

You can do this as follows:

<p class="user" v-if="Item && Item.date"><i class="fa fa-user"></i>{{Item.date }}</p>

JQuery: need to hide div if input file is empty

You had a typo (variables are case sensitive - fileName !== filename).
I added the show part:

alert( "Animation complete." );$(function () {    $("input:file").change(function () {        var fileName = $(this).val();        if (fileName != "") {            $("#instrucciones-adicionales").hide();        } else {            $("#instrucciones-adicionales").show();        }    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><main role="main">

    <form method="post" enctype="multipart/form-data">       <input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">
    <div class="form-group">
       <div id="div_id_imagenes" class="form-group">
            <label for="id_imagenes" class="col-form-label  requiredField">                Imagenes<span class="asteriskField">*</span>            </label>

                <div class="">                    <input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">
                </div>

    </div>
      <div id="instrucciones-adicionales" style="display: none">
           <p class="bold-font"> Instrucciones adicionales (opcional):</p>

   <div id="div_id_instrucciones" class="form-group">      <label for="id_instrucciones" class="col-form-label  requiredField">                    Instrucciones<span class="asteriskField">*</span>                </label>



       <div class="">           <textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">    </textarea>

    </div>

 </div>




  </div> </div>

                        </br>                        </br>
                        <p>O, sáltate este paso y envía tu arte por correo electrónico</p>

                        <button type="submit" class="btn btn-naranja text-white btn-block">Continuar                        </button>

                    </form>
</main>