Ways to dynamically conceal an HTML element when another element is devoid of content

Question

Ways to dynamically conceal an HTML element when another element is devoid of content

How can I dynamically hide the heading above a div if that div is empty? The content of the div will change based on user input. I would like the heading1 to appear immediately after a button click event.

I am inclined towards a CSS solution, although the page already utilizes jQuery and JavaScript extensively, so I am open to all suggestions.

If assigning unique IDs to all headings simplifies the task, I am willing to go down that route as well.

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 Stackoverflow solutions do not handle scenarios where the content reappears once it is no longer empty.

javascript jquery html css

Answer 1

Answer №1

To ensure that your div displays the added content correctly, it is important to create a function and invoke it whenever you append new content.

function addNewContent() {
  document.getElementById("Content1").innerHTML = "Additional Content";
  toggleEmptyItems()
}

function toggleEmptyItems() {
  $(".rulescontent:empty").parent().hide();
  $(".rulescontent:not(:empty)").parent().show();
}
toggleEmptyItems()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>Title 1</h1>
  <div style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>

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

<button type='button' onclick="addNewContent()">Add New Content</button>

Answer 2

To ensure that your div displays the added content correctly, it is important to create a function and invoke it whenever you append new content.

function addNewContent() {
  document.getElementById("Content1").innerHTML = "Additional Content";
  toggleEmptyItems()
}

function toggleEmptyItems() {
  $(".rulescontent:empty").parent().hide();
  $(".rulescontent:not(:empty)").parent().show();
}
toggleEmptyItems()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>Title 1</h1>
  <div style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>

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

<button type='button' onclick="addNewContent()">Add New Content</button>

Answer 3

Answer №2

To streamline the process of updating the content in your rulescontent divs without manually adding code to each instance, consider utilizing a MutationObserver. Here's an example implementation:

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

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

// Define options for the observer
let config = { childList: true };

// Callback function to handle observed mutations
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 specified 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>

(Inspired by the MutationObserver MDN example.)

Answer 4

To streamline the process of updating the content in your rulescontent divs without manually adding code to each instance, consider utilizing a MutationObserver. Here's an example implementation:

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

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

// Define options for the observer
let config = { childList: true };

// Callback function to handle observed mutations
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 specified 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>

(Inspired by the MutationObserver MDN example.)

Ways to dynamically conceal an HTML element when another element is devoid of content

Answer №1

Answer №2

Similar questions

Utilize multiple background images in CSS with a set of three unique images

Can you explain the distinction between max-width and min-width in media queries for HTML and CSS?

Issue with Bootstrap cards overlapping while searching

Accessing the current instance in Vue when triggered by a checkbox event

Establishing MQTT Connection in Ionic 3

Dealing with 404 page not found error without replacing the default in Next.js 13

cross-domain ajax response

The CSS transformation is being overridden

Switching to a jQuery IF statement instead of a FOR loop allows for more streamlined

Creating anchor links with #id that function correctly in an Angular project can sometimes be challenging

Is there a way to verify if an email is already registered within a MERN stack application

Validating various Google Sheet tabs in real-time

Looking for a way to incorporate or locate additional files within nodejs?

Getting a user's group name from Azure Active Directory in an Angular application - a step-by-step guide

Footer positioned correctly with relative DIV

The React Functional Component undergoes exponential re-renders when there is a change in the array

Implement real-time reporting functionality in Selenium

Ensuring form input validity in real-time using jQuery's keyup event

Struggling to align Social Media Share Buttons in inline format for a website

What is the best way to modify the selection text background with CSS?