Tengo un formset dinámico donde el usuario puede hacer clic en un botón para eliminar formularios del formset antes de hacer clic en enviar. Lo logré aplicando algo de javascript a la etiqueta del botón. Esta es una aplicación Django.

Mi problema surge cuando agrego un ícono de papelera como imagen del botón. La imagen en sí no se puede hacer clic ni es dinámica (es decir, se elimina el formulario cuando se hace clic), pero el área del botón alrededor de la imagen sí lo es. Me gustaría que se pudiera hacer clic en todo el asunto.

Al intentar hacer clic en el ícono de la papelera, no sucede nada y la consola registra este error:

Uncaught TypeError: Cannot set properties of null (setting 'checked') at HTMLButtonElement.removeIngredient

Al rastrear este error, encuentro lo siguiente en la pestaña de fuentes de la consola de Chrome:

Esta imagen se corresponde con el javascript a continuación.

HTML

 <button class="remove-button" id="remove-ingredient" type="submit"><img src="{% static 'inventory/trash-icon.png' %}"></button>

CSS

 .remove-button { border: none; width: 100%; background-color: white; display: flex; justify-content: center; align-items: center; } .remove-button img { height: 20px; width: 20px; } .remove-button:hover { cursor: pointer; }

JavaScript

 function removeBtnListener () { const removeIngredientBtns = document.getElementsByClassName('remove-button') for (let i = 0; i < removeIngredientBtns.length; i++) { removeIngredientBtns[i].addEventListener('click', removeIngredient) } } function removeIngredient (event) { if (event) { event.preventDefault() } let ingredientFormToBeRemoved = event.path[1] let indexString = ingredientFormToBeRemoved.id let array = indexString.split('-') let indexNum = array[2] let deleteCheckbox = document.getElementById(`id_ingredientquantity_set-${indexNum}-DELETE`) deleteCheckbox.checked = true ingredientFormToBeRemoved.setAttribute('class', 'hidden') }

Aquí hay una imagen del formset. Al hacer clic en el área alrededor del icono de la papelera (contorno rojo), se elimina el formulario. Al hacer clic en el ícono de la papelera (flecha verde), no sucede nada.

¿Alguien sabe cómo hacer que esto funcione para que todo el elemento elimine el formulario correctamente cuando se hace clic?