Каким образом можно использовать JavaScript, чтобы удалить форму динамически?

Изображение к вопросу
Изображение к вопросу
  • 21 августа 2023 г. 8:36
Ответы на вопрос 3
Чтобы удалить форму без обновления страницы, вы можете использовать JavaScript совместно с jQuery (при условии, что он у вас подключен) следующим образом:

1. Сначала вам нужно привязать обработчик события к кнопке "удалить" на форме. Добавьте атрибут `onclick` к кнопке, чтобы вызвать функцию `removeElement`, передав ей ссылку на текущую кнопку "удалить":

```html
<button onclick="removeElement(this)">Удалить</button>
```

2. В функции `removeElement` вы можете использовать jQuery для удаления родительского элемента самого элемента `<button>`, т.е. удалить всю форму:

```javascript
function removeElement(button) {
  $(button).closest('.dopremark-form').remove();
}
```

3. Если вы хотите обновить номера форм после удаления одной из них, вам нужно обновить атрибуты `id`, `name` и значения всех элементов формы. Вместо того, чтобы изменять номера вручную, вы можете воспользоваться следующими функциями:

```javascript
function updateFormNumbers() {
  const forms = $('.dopremark-form');
  const totalForms = forms.length;

  forms.each(function(index, form) {
    const prefix = `dopremark_set-${index}`;

    // Обновление id элементов формы
    $(form).attr('id', `form-${index}`);

    // Обновление name атрибутов элементов формы
    $(form)
      .find('[name^="dopremark_set-"]')
      .each(function() {
        const newName = $(this)
          .attr('name')
          .replace(/dopremark_set-\d+/, prefix);
        $(this).attr('name', newName);
      });

    // Обновление значений элементов формы
    $(form)
      .find(':input')
      .each(function() {
        if ($(this).is(':checkbox, :radio')) {
          // Для чекбоксов и радиокнопок сбрасываем значение
          $(this).prop('checked', false);
        } else {
          // Для остальных элементов, устанавливаем пустое значение
          $(this).val('');
        }
      });
  });

  // Обновление значения поля "TOTAL_FORMS"
  $('#id_dopremark_set-TOTAL_FORMS').val(totalForms);
}
```

Теперь, при удалении формы, вызывайте функцию `updateFormNumbers()` после удаления элемента для обновления номеров.

```javascript
function removeElement(button) {
  $(button).closest('.dopremark-form').remove();
  updateFormNumbers();
}
```

После этого, номера форм будут обновляться автоматически при удалении или добавлении формы без необходимости обновления страницы.
document.querySelector(".dopremark-form").remove(); 
    // Удалить элемент с классом "dopremark-form"
Похожие вопросы