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

Question

[KatyaBychko]

В джанго проекте использую modelformset_factory , но удаление формы происходит только после обновления страницы. Как сделать чтобы при нажатии на удалить сразу удалялась форма. (плохо js знаю)
С помощью видео урока получилось сделать создание новой формы динамически (добавить), а удалить не получается. Т.е нужно чтобы изменялся и номер формы(если например удалить вторую их трех форм и т.д) Попытки:

function removeElement(element) {
  $(element).parent(".dopremark-form").remove();
}

Добавление новой формы:

<script>
    const addMoreBtn = document.getElementById('add-form')
    const totalNewForms = document.getElementById('id_dopremark_set-TOTAL_FORMS')
   
    addMoreBtn.addEventListener('click', add_new_form)

    function add_new_form(event) {
        if (event) {
            event.preventDefault()
        }
        const currentDopForms = document.getElementsByClassName('dopremark-form')
        const currentFormCount = currentDopForms.length
        const formCopyTarget = document.getElementById('dopremark-form-list')
        const copyEmptyFormEl = document.getElementById('empty-form').cloneNode(true)
        copyEmptyFormEl.setAttribute('class', 'dopremark-form')
        copyEmptyFormEl.setAttribute('id', `form-${currentFormCount}`)
        const regex = new RegExp('__prefix__', 'g')
        copyEmptyFormEl.innerHTML = copyEmptyFormEl.innerHTML.replace(regex, currentFormCount)
        totalNewForms.setAttribute('value', currentFormCount + 1)

        formCopyTarget.append(copyEmptyFormEl)
    }

Comments

[imko]

Ну судя по тому что у тебя чекбокс и "сохранить" а не кнопка "удалить" логика визуалу соответствует)

[KatyaBychko]

imko, Да я понимаю, вот хочу изменить на кнопку)

[imko]

KatyaBychko, в скрипте добавления формы сразу лучше допиши создание этой кнопки и там же вешай слушатель на нее, чтоб лишний раз поиск по элементам не устраивать, она у тебя в переменной copyEmptyFormEl уже есть
А где номер должен измениться? Если это просто циферка-декоратор для юзера то ее можно через цсс добавить и оно само будет считаться

[Stalker_RED]

KatyaBychko, скажите, если не секрет - а в чем смысл делать форму БЕЗ элемента <form>? Вы лишаетесь встроенных механизмов работы с формами, а взамен получаете что?

[KatyaBychko]

Stalker_RED, это в джанго модельные наборы форм чтобы создавать сразу несколько форм для отправки на сервер)

[KatyaBychko]

imko, а создать через Element.insertAdjacentHTML() ? (Удалить) Вот так примерно? и потом функцию удаления, да?

[imko]

KatyaBychko, не, создавать тогда надо с помощью createElement, он вернет узел, у узла метод addEventListener для слушателя нажатия. В форму ее добавить можно будет copyEmptyFormEl.append

[imko]

KatyaBychko, ну это для красоты и оптимизона все)

[Одиночка Айс]

Stalker_RED, а взамен фронтендеры оправдывают свое существование)

Answer 1

[senator]

Где .dopremark-form замени на элемент который хочешь удалить

let form = document.querySelector(".dopremark-form");
form.remove();