Почему новые созданные элементы не скрываются?

Question

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

"use strict";
//для полного удаления
const groupText1 = document.querySelector(".groupTextAll"),
  btnOne = document.querySelector(".del"),
  group = document.querySelectorAll(".group"),
  allRemove = document.querySelector(".delAll");
  for (const divBlock of group) {
  groupText1.addEventListener("click", (event) => {
    const btn = event.target.closest("button.delAll");
    if (!btn) return;
    divBlock.classList.toggle('none');
    btn.textContent =
    btn.textContent === "Скрыть новости" ? "Показать новости" : "Скрыть новости";
  });
}


//удаление по одной

groupText1.addEventListener("click", (event) => {
  const 
  btn = event.target.closest(".del");
  if (!btn) return;
  let group = event.target.closest('.group')
  group.remove();
});

//кнопка редакции новостей span

groupText1.addEventListener("click", function (event) {
  const parent = event.target.closest(".group"),
        btn = event.target.closest('.very');
  if (!btn) return;
     const
        span = parent.querySelector(".view"),
        textarea = parent.querySelector(".edit");
  span.classList.add("none");
  textarea.classList.remove("edit");
  textarea.value = span.innerHTML;
  textarea.focus();
  
  textarea.addEventListener("blur", function () {
    span.innerHTML = textarea.value;
    textarea.classList.add("edit");
    span.classList.remove("none");
  });

  textarea.addEventListener("keydown", function (event) {
    if (event.code == "Enter") textarea.blur();
  });
});





// делегирование - кнопка добавления

const btnAdd = document.querySelector("button.add");

groupText1.addEventListener("click", (event) => {
  const div2 = event.target.closest(".groupTextAll"),
    //делегирование
    btn = event.target.closest("button.add");
  if (!btn) return;
  //создание
  const div = document.createElement("div"),
       divGroupBtn = document.createElement('div'),
    h2 = document.createElement("h2"),
    btnRedact = document.createElement("button"),
    btnDel = document.createElement("button"),
    span = document.createElement("span"),
    textarea = document.createElement("textarea");

  //добавление классов
  textarea.classList.add("edit-1", "edit");
  div.classList.add("group");
  divGroupBtn.classList.add("subject-btn");
  btnDel.classList.add("del");
  btnRedact.classList.add("very");
  span.classList.add("text", "view");
  //вложение тегов
  div.append(divGroupBtn);
  divGroupBtn.append(btnRedact, btnDel);
  div.append(h2);
  div.append(span);
  div.append(textarea);
  h2.append("Заголовок");
  btnRedact.append("Редактировать");
  btnDel.append("Удалить");
  span.append("Текст");
  div2.append(div);
});

body {
  background-color: #fbf2e9;
}

.group-btn {
  margin         : 1em;
  display        : flex;
  justify-content: space-between;
  gap            : 1em;
}

.text-window {
  color      : aliceblue;
  user-select: none;
}

button {
  user-select: none;
}

input {
  user-select: none;
}

.blockDnone {
  display: none;
}

.block {
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  background-color: black;
  opacity         : 0.9;
}

.block2 {
  width          : 100%;
  height         : 100%;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
}

.closeWindow {
  width      : 5vw;
  height     : 5vh;
  font-weight: 900;
  color      : black;
}

.groupTextAll {
  margin: 1em 0em;
}


.group {
  margin       : 1em;
  padding      : .5em 1em;
  border       : 2px solid gray;
  border-radius: 1em;
}


.text {
  color: gray;
}

.subject-btn {
  display        : flex;
  justify-content: space-between;
}

.edit {
  display: none;
}



textarea {
  background-color: bisque;
  width           : 100%;
  height          : 150px;
  resize          : none;
}


.none {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="news.css" />
    <title>Document</title>
  </head>
  <body id="all">
    <div class="groupTextAll">
      <div class="group-btn">
        <button class="delAll">Скрыть новости</button>
        <button class="add">Добавить новость</button>
      </div>
      <div class="group">
        <div class="subject-btn">
        <button class="very">редактировать</button>
        <button class="del">удалить</button>
      </div>
        <h2 class="vi">
          Муфтий призвал наказать блогера, который растоптал и оплевал
          православный крест
        </h2>
        <span class="text view">
          Глумившегося над православным крестом блогера из Дагестана необходимо
          строго наказать по российскому законодательству, заявил РИА Новости
          председатель Координационного центра мусульман Северного Кавказа
          муфтий Исмаил Бердиев.РИА Новости Исмаил Бердиев Ранее с просьбой
          привлечь блогера к ответственности в МВД и Генпрокуратуру обратился
          глава комитета Госдумы по информполитике Александр Хинштейн.Телеканал
          360° 17 июля в сети появилось видео, на котором дагестанский стример
          топчет ногами православный крест.Lenta.ru Следственный комитет
          возбудил уголовное дело по ч. 1 ст. 148 Уголовного кодекса — нарушение
          права на свободу совести и вероисповеданий.
        </span>
        <textarea name="text" class="edit-1 edit"></textarea>
      </div>
      <div class="group">
        <div class="subject-btn">
        <button class="very">редактировать</button>
        <button class="del">удалить</button>
      </div>
        <h2 class="vi">
          Лавров обратился к постпреду США в СБ ООН и спросил, не ошиблась ли
          она комнатой
        </h2>
        <span class="text view">
          Министр иностранных дел РФ Сергей Лавров, выступая в ходе заседания
          Совбеза ООН, посвященного кризису на Ближнем Востоке, обратился к
          постпреду США Линде Томас-Гринфилд.РИА Новости Поводом для такого
          обращения послужило выступление постпреда США на предыдущем заседании
          Совбеза ООН, организованном Россией и посвященном многостороннему
          сотрудничеству, где Гринфилд сосредоточила внимание на украинском
          кризисе.URA.Ru «Слушая сегодня представителя Израиля, у вас не
          возникло ощущение, что вы ошиблись комнатой и пришли не на ту
          дискуссию, которая была объявлена? Надеюсь, понятно, о чем я говорю»,
          — обратился Лавров к Гринфилд (цитата по ТАСС).РБК Сегодня постпред
          Израиля, который ранее выступил на дебатах в Совбезе по
          ближневосточному кризису, активно критиковал Иран и заявил, что
          Тегеран "поставляет военное оборудование, которое потом используется
          против украинцев".РИА Новости
        </span>
        <textarea name="text" class="edit-2 edit"></textarea>
      </div>
      <div class="group">
        <div class="subject-btn">
        <button class="very">редактировать</button>
        <button class="del">удалить</button>
      </div>
        <h2 class="vi">
          Путин поручил перейти к масштабному внедрению цифрового рубля
        </h2>
        <span class="text view">
          Платформа цифрового рубля продемонстрировала свою
          работоспособность.Газета.Ru России необходимо не упустить момент —
          своевременно настраивать правовую базу, развивать инфраструктуру,
          создавать условия для обращения цифровых активов как внутри страны,
          так и в отношениях с зарубежными партнерами, заявил Путин.ТВ Центр
          "Нужно сделать следующий шаг: перейти к более широкому внедрению
          цифрового рубля в экономику, хозяйственную деятельность и в сферу
          финансов", — отметил Путин.Газета.Ru Банк России с 1 сентября расширит
          пилот цифрового рубля на реальных клиентах с реальными деньгами,
          сообщила первый зампред ЦБ Ольга Скоробогатова на Финансовом
          конгрессе.
        </span>
        <textarea name="text" class="edit-3 edit"></textarea>
      </div>
    </div>
    <script src="news.js"></script>
  </body>
</html>

Answer 1

Молодцы что справились!

Хотелось бы дать вам пару советов по улучшению вашего кода:

Тексты обычно обромляют в тег p, а не span. span используют когда из всего текста вам нужно выделить какую-то часть, например слово конкретное выделить или изменить цвет и т.д.
Когда вы пишите group = document.querySelectorAll(".group"), то он находит элементы, которые уже есть на странице, при добавлении новых элементов, они будут проигнорены. А потому один из варинатов, которые я могу вам предложить это переделать в функцию, которая будет каждый раз вызываться и искать заново весь список элементов
Если вам нужно достать текстовые данные или их установить, то используйте textContent, а не innerHTML. И не надо устанваливать текст с помощью append
append может принимать в себя несколько аргументов, а потому вместо:
```
container.append(div1);
container.append(div2);
container.append(div3);
...
```
можно написать:
```
conatiner.append(div1, div2, div3, ...)
```
Делегировние нужно использовать когда у вас есть много элементов и их количество может динамически меняться, если же у вас 1 или пару кнопок, то намного легче просто навесить на них слушателей напрямую
Так же вам стоит лучше называть имена переменных, без просмотра чему они конкретно равны не очень понятно чем они явялются

"use strict";

//для полного удаления
const groupText = document.querySelector(".groupTextAll");
const btnOne = document.querySelector(".del");
const getAllGroups = () => document.querySelectorAll(".group");
const allRemove = document.querySelector(".delAll");
const btnAdd = document.querySelector("button.add");

allRemove.addEventListener("click", (event) => {
  const btn = event.target.closest("button.delAll");

  if (!btn) return;

  getAllGroups().forEach(group => group.classList.toggle('none'));

  allRemove.textContent = allRemove.textContent === "Скрыть новости" ? "Показать новости" : "Скрыть новости";
});


//удаление по одной
groupText.addEventListener("click", (event) => {
  const btn = event.target.closest(".del");

  if (!btn) return;

  const group = event.target.closest('.group')

  group.remove();
});

//кнопка редакции новостей span
groupText.addEventListener("click", function(event) {
  const parent = event.target.closest(".group");
  const btn = event.target.closest('.very');

  if (!btn) return;

  const span = parent.querySelector(".view");
  const textarea = parent.querySelector(".edit");

  span.classList.add("none");
  textarea.classList.remove("edit");
  textarea.value = span.textContent;
  textarea.focus();

  textarea.addEventListener("blur", function() {
    span.textContent = textarea.value;
    textarea.classList.add("edit");
    span.classList.remove("none");
  });

  textarea.addEventListener("keydown", function(event) {
    if (event.code == "Enter") textarea.blur();
  });
});

// делегирование - кнопка добавления
groupText.addEventListener("click", (event) => {
  const groups = event.target.closest(".groupTextAll");
  const btn = event.target.closest("button.add");

  if (!btn) return;

  //создание
  const group = document.createElement("div");
  const divGroupBtn = document.createElement('div');
  const h2 = document.createElement("h2");
  const btnRedact = document.createElement("button");
  const btnDel = document.createElement("button");
  const span = document.createElement("span");
  const textarea = document.createElement("textarea");

  //добавление классов
  textarea.classList.add("edit-1", "edit");
  group.classList.add("group");
  divGroupBtn.classList.add("subject-btn");
  btnDel.classList.add("del");
  btnRedact.classList.add("very");
  span.classList.add("text", "view");

  //добавление текстов
  h2.textContent = "Заголовок";
  btnRedact.textContent = "Редактировать";
  btnDel.textContent = "Удалить";
  span.textContent = "Текст";

  //вложение тегов
  divGroupBtn.append(btnRedact, btnDel);

  group.append(divGroupBtn, h2, span, textarea);

  groups.append(group);
});

body {
  background-color: #fbf2e9;
}

.group-btn {
  margin: 1em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

.text-window {
  color: aliceblue;
  user-select: none;
}

button {
  user-select: none;
}

input {
  user-select: none;
}

.blockDnone {
  display: none;
}

.block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.9;
}

.block2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.closeWindow {
  width: 5vw;
  height: 5vh;
  font-weight: 900;
  color: black;
}

.groupTextAll {
  margin: 1em 0em;
}

.group {
  margin: 1em;
  padding: .5em 1em;
  border: 2px solid gray;
  border-radius: 1em;
}

.text {
  color: gray;
}

.subject-btn {
  display: flex;
  justify-content: space-between;
}

.edit {
  display: none;
}

textarea {
  background-color: bisque;
  width: 100%;
  height: 150px;
  resize: none;
}

.none {
  display: none;
}

<div class="groupTextAll">
  <div class="group-btn">
    <button class="delAll">Скрыть новости</button>
    <button class="add">Добавить новость</button>
  </div>
  <div class="group">
    <div class="subject-btn">
      <button class="very">редактировать</button>
      <button class="del">удалить</button>
    </div>
    <h2 class="vi">
      Муфтий призвал наказать блогера, который растоптал и оплевал православный крест
    </h2>
    <p class="text view">
      Глумившегося над православным крестом блогера из Дагестана необходимо строго наказать по российскому законодательству, заявил РИА Новости председатель Координационного центра мусульман Северного Кавказа муфтий Исмаил Бердиев.РИА Новости Исмаил Бердиев
      Ранее с просьбой привлечь блогера к ответственности в МВД и Генпрокуратуру обратился глава комитета Госдумы по информполитике Александр Хинштейн.Телеканал 360° 17 июля в сети появилось видео, на котором дагестанский стример топчет ногами православный
      крест.Lenta.ru Следственный комитет возбудил уголовное дело по ч. 1 ст. 148 Уголовного кодекса — нарушение права на свободу совести и вероисповеданий.
    </p>
    <textarea name="text" class="edit-1 edit"></textarea>
  </div>
  <div class="group">
    <div class="subject-btn">
      <button class="very">редактировать</button>
      <button class="del">удалить</button>
    </div>
    <h2 class="vi">
      Лавров обратился к постпреду США в СБ ООН и спросил, не ошиблась ли она комнатой
    </h2>
    <p class="text view">
      Министр иностранных дел РФ Сергей Лавров, выступая в ходе заседания Совбеза ООН, посвященного кризису на Ближнем Востоке, обратился к постпреду США Линде Томас-Гринфилд.РИА Новости Поводом для такого обращения послужило выступление постпреда США на предыдущем
      заседании Совбеза ООН, организованном Россией и посвященном многостороннему сотрудничеству, где Гринфилд сосредоточила внимание на украинском кризисе.URA.Ru «Слушая сегодня представителя Израиля, у вас не возникло ощущение, что вы ошиблись комнатой
      и пришли не на ту дискуссию, которая была объявлена? Надеюсь, понятно, о чем я говорю», — обратился Лавров к Гринфилд (цитата по ТАСС).РБК Сегодня постпред Израиля, который ранее выступил на дебатах в Совбезе по ближневосточному кризису, активно
      критиковал Иран и заявил, что Тегеран "поставляет военное оборудование, которое потом используется против украинцев".РИА Новости
    </p>
    <textarea name="text" class="edit-1 edit"></textarea>
  </div>
  <div class="group">
    <div class="subject-btn">
      <button class="very">редактировать</button>
      <button class="del">удалить</button>
    </div>
    <h2 class="vi">
      Путин поручил перейти к масштабному внедрению цифрового рубля
    </h2>
    <p class="text view">
      Платформа цифрового рубля продемонстрировала свою работоспособность.Газета.Ru России необходимо не упустить момент — своевременно настраивать правовую базу, развивать инфраструктуру, создавать условия для обращения цифровых активов как внутри страны,
      так и в отношениях с зарубежными партнерами, заявил Путин.ТВ Центр "Нужно сделать следующий шаг: перейти к более широкому внедрению цифрового рубля в экономику, хозяйственную деятельность и в сферу финансов", — отметил Путин.Газета.Ru Банк России
      с 1 сентября расширит пилот цифрового рубля на реальных клиентах с реальными деньгами, сообщила первый зампред ЦБ Ольга Скоробогатова на Финансовом конгрессе.
    </p>
    <textarea name="text" class="edit-1 edit"></textarea>
  </div>
</div>

БЛОГ НА HUSL

Почему новые созданные элементы не скрываются?

Ответы (1 шт):