CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nivatius
Nivatius

Reputation: 270

how to dynamically hide an html element if another element is empty

I want to hide the heading above a div if said div is empty. the content of the content div will change due to user input. What I expect is heading1 to appear as soon as the button is clicked.

I'd prefer a css solution, but I am allready using jquery and a lot of javascript on the page, so I am open to all solutions.

it is possible to give all headings a unique ID, if that makes things easier 

function addcontent()
{
document.getElementById("Content1").innerHTML = "Extra Content";
}

	$(".rulescontent:empty").parent().hide();
	$(!".rulescontent:empty").parent().show();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>heading1</h1>
  <div  style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>
		
<div>
  <h1>heading2</h1>
  <div style="font-size:90%" id="Content2" class="rulescontent"></div>
</div>
    
<button  type='button' onclick="addcontent()">add content</button>

other Stakcoverflow solutions also don't let content reappear once it is not empty anymore.

Upvotes: 1

Views: 1081

Answers (2)

Alohci
Alohci

Reputation: 82976

If you don't want to have to add code to every place where you change the contents of one of your rulescontent divs, you need a MutationObserver. Like this:

function addcontent(id) {
   document.getElementById(id).innerHTML = "Extra Content";
}
function removecontent(id) {
   document.getElementById(id).innerHTML = "";
}

$(".rulescontent:empty").parent().hide();
$(!".rulescontent:empty").parent().show();

// Options for the observer (which mutations to observe)
let config = { childList: true };

// Callback function to execute when mutations are observed
let callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        $(mutation.target.parentNode)
          .toggle(! $(mutation.target).is(':empty'));
    }
};

$('.rulescontent').each(function() {
    // Create an observer instance linked to the callback function
    let observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(this, config);
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test Case</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div>
  <h1>heading1</h1>
  <div style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>
		
<div>
  <h1>heading2</h1>
  <div style="font-size:90%" id="Content2" class="rulescontent"></div>
</div>
    
Section 1: <button  type='button' onclick="addcontent('Content1')">add content</button>
<button  type='button' onclick="removecontent('Content1')">remove content</button>
<br>
Section 2: <button  type='button' onclick="addcontent('Content2')">add content</button>
<button  type='button' onclick="removecontent('Content2')">remove content</button>
</body>
</html>

(Adapted from the MutationObserver MDN example.)

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

You need to create a function and call it when you append content to your div

function addcontent() {
  document.getElementById("Content1").innerHTML = "Extra Content";
  toggleEmpty()
}

function toggleEmpty() {
  $(".rulescontent:empty").parent().hide();
  $(".rulescontent:not(:empty)").parent().show();
}
toggleEmpty()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>heading1</h1>
  <div style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>

<div>
  <h1>heading2</h1>
  <div style="font-size:90%" id="Content2" class="rulescontent"></div>
</div>

<button type='button' onclick="addcontent()">add content</button>

Upvotes: 4

Related Questions