how to dynamically hide an html element if another element is empty
Question
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.
2 answers
solution1
4 ACCPTED 2019-06-28 09:58:23
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>
solution2
1 2019-06-28 16:30:43
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 .)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.