Script to remove input fields

This commit is contained in:
Mouse Reeve 2022-03-14 11:34:14 -07:00
parent a2f2104a08
commit 35e6dede09
2 changed files with 23 additions and 2 deletions

View file

@ -1,6 +1,19 @@
(function () {
"use strict";
/**
* Remoev input field
*
* @param {event} the button click event
*/
function removeInput(event) {
const trigger = event.currentTarget;
const input_id = trigger.dataset.remove;
const input = document.getElementById(input_id);
input.remove();
}
/**
* Duplicate an input field
*
@ -29,4 +42,8 @@
document
.querySelectorAll("[data-duplicate]")
.forEach((node) => node.addEventListener("click", duplicateInput));
document
.querySelectorAll("[data-remove]")
.forEach((node) => node.addEventListener("click", removeInput));
})();

View file

@ -87,12 +87,16 @@
<label class="label is-sr-only" for="id_add_subject={% if not forloop.first %}-{{forloop.counter}}{% endif %}">
{% trans "Add subject" %}
</label>
<div class="field has-addons">
<div class="field has-addons" id="subject_field_wrapper_{{ forloop.counter }}">
<div class="control is-expanded">
<input id="id_add_subject-{{ forloop.counter }}" type="text" name="subject-" value="{{ subject }}" class="input">
</div>
<div class="control">
<button class="button is-danger is-light" type="button">
<button
class="button is-danger is-light"
type="button"
data-remove="subject_field_wrapper_{{ forloop.counter }}"
>
<span class="icon icon-x" title="{% trans 'Remove' %}">
<span class="is-sr-only">{% trans "Remove" %}</span>
</span>