Метод 1: классический подход JavaScript

<button onclick="openForm()">Open Form</button>
<div id="formContainer"></div>
<script>
  let currentForm = null;

  function openForm() {
    // Close the last form, if any
    if (currentForm) {
      currentForm.remove();
    }
// Create a new form
    const form = document.createElement("form");
    // Add form elements and styling here

    // Append the form to the container
    document.getElementById("formContainer").appendChild(form);

    // Update the currentForm variable
    currentForm = form;
  }
</script>

Метод 2: Магия jQuery

<button id="openBtn">Open Form</button>
<div id="formContainer"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    let currentForm = null;

    $("#openBtn").click(function() {
      // Close the last form, if any
      if (currentForm) {
        currentForm.remove();
      }
// Create a new form
      const form = $("<form></form>");
      // Add form elements and styling here

      // Append the form to the container
      $("#formContainer").append(form);

      // Update the currentForm variable
      currentForm = form;
    });
  });
</script>

Метод 3: Магия React (с хуками)
Если вы работаете с React, вы можете добиться управления формами, используя состояние и хуки. Вот пример использования функциональных компонентов:

import React, { useState } from "react";
function FormManager() {
  const [currentForm, setCurrentForm] = useState(null);
  function openForm() {
    // Close the last form, if any
    if (currentForm) {
      setCurrentForm(null);
    }
// Create a new form
    const form = <form>{/* Add form elements and styling here */}</form>;
    // Update the currentForm state
    setCurrentForm(form);
  }
  return (
    <div>
      <button onClick={openForm}>Open Form</button>
      <div id="formContainer">{currentForm}</div>
    </div>
  );
}

В этом примере React мы используем хук useStateдля управления текущим состоянием формы. При нажатии кнопки вызывается функция openForm, которая закрывает текущую форму и обновляет состояние новой формы.

И вот оно! Мы рассмотрели три разных способа открытия новой формы с помощью кнопки и закрытия последней. Независимо от того, используете ли вы классический JavaScript, jQuery или погружаетесь в мир React, эти методы помогут вам управлять формами как профессионал.

Так что вперед, внедряйте эти методы в свои проекты веб-разработки и повышайте уровень управления формами. Приятного кодирования!