Как динамически скрыть элемент html, если другой элемент пуст

Я хочу скрыть заголовок над div, если указанный div пуст. содержимое div содержимого изменится из-за пользовательского ввода. Я ожидаю, что заголовок1 появится сразу после нажатия кнопки.

Я бы предпочел решение css, но я уже использую jquery и много javascript на странице, поэтому я открыт для всех решений.

можно присвоить всем заголовкам уникальный идентификатор, если это упрощает задачу

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>

другие решения Stakcoverflow также не позволяют контенту снова появляться, если он больше не пуст.

javascript jquery html css

28.06.2019 11:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

289

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам нужно создать функцию и вызвать ее, когда вы добавляете содержимое в свой 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>

28.06.2019 11:58

Если вы не хотите добавлять код в каждое место, где вы меняете содержимое одного из ваших блоков div rulescontent, вам нужен MutationObserver. Так:

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>

(Адаптировано из Пример MutationObserver MDN.)

28.06.2019 18:30

Другие вопросы по теме

Jquery click загружает только первое изображение независимо от изображения, на которое нажали

Выбор определенного элемента из нескольких форм

Как сделать автоматическую генерацию серийного номера стабильной и фиксированной, если сортировка выполняется в порядке возрастания в каком-либо другом столбце в представлении сетки

Японские символы не отображаются (пусто)

Добавить класс в родительский div, если какой-либо из дочерних элементов имеет определенный класс, удалить, если нет (jQuery или Javascript)

Как я могу переключать более одного элемента одним щелчком мыши в jQuery?

Событие вставки не работает должным образом в редактируемом содержимом

Как открыть меню с выпадающим эффектом?

Как рассчитать сумму нескольких динамических полей ввода в Javascript?

Как правильно регистрировать контент, загружаемый через Ajax

Как динамически скрыть элемент html, если другой элемент пуст

Ответы 2

Другие вопросы по теме

Похожие вопросы