Как динамически удалить форму c помощью js?

от
prokoding.ru > JavaScript > Как динамически удалить форму c помощью js?

Для динамического удаления формы с помощью JavaScript, мы должны сначала получить ссылку на элемент формы, который мы хотим удалить. Затем мы можем использовать метод removeChild() или метод remove() для удаления этого элемента из его родительского элемента.

Допустим, у нас есть форма с id "myForm" и мы хотим удалить ее с помощью JavaScript. Мы можем сделать это следующим образом:

1. Получаем ссылку на форму используя метод getElementById():

var form = document.getElementById("myForm");

2. Удаляем форму, используя метод removeChild():

form.parentNode.removeChild(form);

Или используем метод remove():

form.remove();

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

Метод removeChild() предоставляет возможность удалить любой элемент из DOM, но требует наличия родительского элемента. Метод remove() является более современным и удобным в использовании, но не поддерживается во всех старых браузерах.

Полный пример кода, который динамически удаляет форму с помощью JavaScript:

<!DOCTYPE html>
<html>
<body>

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <input type="submit" value="Submit">
</form>

<button onclick="deleteForm()">Delete Form</button>

<script>
function deleteForm() {
  var form = document.getElementById("myForm");
  form.parentNode.removeChild(form);
}
</script>

</body>
</html>

В этом примере форма будет удалена при нажатии на кнопку "Delete Form".

Таким образом, используя методы removeChild() или remove(), мы можем легко удалить форму или любой другой элемент из DOM с помощью JavaScript.