Закрытие нескольких форм bootstrap 5?

В Bootstrap 5 закрытие нескольких форм может быть реализовано с использованием JavaScript. Для этого можно применить такие методы и функции, как querySelectorAll(), forEach(), addEventListener() и .addEventListener('click', ...).

1. Сначала необходимо назначить уникальные идентификаторы (ID) формам, которые вы хотите закрыть. Например, вы можете использовать следующий код для создания двух форм с ID "form1" и "form2":

<form id="form1">
  <!-- Содержимое формы 1 -->
</form>

<form id="form2">
  <!-- Содержимое формы 2 -->
</form>

2. Затем можно создать функцию, которая будет отвечать за закрытие формы. В данном примере функция closeForm() принимает один параметр formId, который является ID формы, которую нужно закрыть. Внутри функции используется метод .remove() для удаления формы из DOM (Document Object Model):

function closeForm(formId) {
  const form = document.querySelector(`#${formId}`);
  form.remove();
}

3. Далее можно создать функцию, которая будет привязывать функцию closeForm() к событию клика на кнопку или ссылку для закрытия формы. При каждом клике на элементе с классом "close-form" будет вызываться функция closeForm() и передаваться ID формы в качестве параметра:

function bindCloseFormButtons() {
  const closeFormButtons = document.querySelectorAll('.close-form');
  closeFormButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      const formId = this.dataset.formId;
      closeForm(formId);
    });
  });
}

4. Наконец, вызовите функцию bindCloseFormButtons() в месте, где вы хотите активировать закрытие форм. Например, вы можете добавить следующий код внутрь блока <script> после создания форм и привязки кнопок:

document.addEventListener('DOMContentLoaded', function() {
  bindCloseFormButtons();
});

Теперь при клике на элементы с классом "close-form" соответствующая форма будет закрыта.

Пример использования:

<form id="form1">
  <h2>Форма 1</h2>
  <button class="close-form" data-form-id="form1">Закрыть</button>
</form>

<form id="form2">
  <h2>Форма 2</h2>
  <button class="close-form" data-form-id="form2">Закрыть</button>
</form>

<script>
function closeForm(formId) {
  const form = document.querySelector(`#${formId}`);
  form.remove();
}

function bindCloseFormButtons() {
  const closeFormButtons = document.querySelectorAll('.close-form');
  closeFormButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      const formId = this.dataset.formId;
      closeForm(formId);
    });
  });
}

document.addEventListener('DOMContentLoaded', function() {
  bindCloseFormButtons();
});
</script>

Описанный выше код позволит закрывать несколько форм Bootstrap 5 при клике на соответствующие кнопки или ссылки.