Script to remove input fields

bookwyrm/static/js/forms.js

@@ -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));
 })();

bookwyrm/templates/book/edit/edit_book_form.html

@@ -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>