Нужно скрыть/показать блок <li> в таблице.
Подскажите, как лучше решить такую задачу? Нужно, чтобы вставлялся блок "Активных задач нет", если этих блоков с задачами нет. И, собственно скрывался если эти блоки появляются Сделали вот такой вариант, но кажется что это не совсем хорошее решение
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Задачи</title>
</head>
<body>
<ul class="tasks-list" id="tasks">
<li class="tasks-list__item">
<a class="tasks-list__title _gray" href="#">
<span class="tasks-list__text">Задачи</span>
<span class="tasks-list__btn"></span>
</a>
</li>
</ul>
<script>
var list = document.querySelector(".tasks-list");
var countLi = list.getElementsByTagName("li").length;
var taskContainer = document.getElementById("tasks");
if (countLi <= 1) {
var li = document.createElement("li");
var a = document.createElement("a");
var span = document.createElement("span");
li.classList.add("tasks-list__no-tasks");
a.classList.add("tasks-list__title");
span.classList.add("tasks-list__text");
span.innerText = "Активных задач нет";
a.href = "#";
a.appendChild(span);
li.appendChild(a);
taskContainer.appendChild(li);
}
if (countLi >= 1) {
var elemLi = document.getElementsByClassName("tasks-list__no-tasks")[0];
taskContainer.removeChild(elemLi);
}
</script>
</body>
|
TimurChic,
а зачем нужно удалять то что не ставилось? и конечно зачем добавлять, почему это не сервер делает? |
TimurChic,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Задачи</title>
</head>
<body>
<ul class="tasks-list" id="tasks">
</ul>
<script>
var list = document.querySelector(".tasks-list");
if (!list.children.length) {
var li = document.createElement("li");
var text = document.createTextNode("Активных задач нет");
li.className = "tasks-list__no-tasks";
li.appendChild(text);
list.appendChild(li);
}
</script>
</body>
</html>
|
Немного может не до конца объяснил проблему))) Вот этот блок
<li class="tasks-list__item">
<a class="tasks-list__title _gray" href="#">
<span class="tasks-list__text">Задачи</span>
<span class="tasks-list__btn"></span>
</a>
</li>
Он изначально всегда в верстке, остальные блоки генерируются при помощи JS. Нужно написать код, который будет проверять, есть ли блок с другими задачами и если их нет, то вставляется такой блок "Активных задач нет". И наоборот, когда добавляем задачу, этот блок убирается)) Как-то так |
TimurChic,
не понял ничего, что блоки генерирует то пусть и добавляет Активных задач нет, что задачи добавляет то и убирать должно |
| Часовой пояс GMT +3, время: 22:44. |