From 35e6dede098b46c1d0b851281657b5e03c82061d Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Mon, 14 Mar 2022 11:34:14 -0700
Subject: [PATCH] Script to remove input fields

---
 bookwyrm/static/js/forms.js                     | 17 +++++++++++++++++
 .../templates/book/edit/edit_book_form.html     |  8 ++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/bookwyrm/static/js/forms.js b/bookwyrm/static/js/forms.js
index 7d946d147..998873898 100644
--- a/bookwyrm/static/js/forms.js
+++ b/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));
 })();
diff --git a/bookwyrm/templates/book/edit/edit_book_form.html b/bookwyrm/templates/book/edit/edit_book_form.html
index d886d12f7..fc15d26ae 100644
--- a/bookwyrm/templates/book/edit/edit_book_form.html
+++ b/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>