metadata: suppression metadonnée

public/css/app.css

@@ -63,6 +63,15 @@
     border-color: transparent !important;
 }
 
+.delete-metadata {
+    cursor: pointer;
+    position: absolute;
+    right: -20px;
+    top: 0;
+    font-size: 1.2rem;
+    user-select: none;
+}
+
 @media (max-width: 480px) {
     .subtitle {
         font-size: .875em

public/js/metadata.js

@@ -52,19 +52,32 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
 
 var addMetadata = function(key, value) {
     let div = document.createElement('div');
-    div.classList.add('form-floating');
-    div.classList.add('mt-3');
+    div.classList.add('form-floating', 'mt-3', 'input-metadata');
+
     let input = document.createElement('input');
     input.value = value;
     input.classList.add('form-control');
+
     let label = document.createElement('label');
     label.innerText = key;
+
+    let deleteButton = document.createElement('div')
+    deleteButton.innerHTML = "×"
+    deleteButton.classList.add('delete-metadata')
+
     div.appendChild(input);
     div.appendChild(label);
+    div.appendChild(deleteButton);
     document.getElementById('form-metadata-container').appendChild(div);
+
     input.focus();
 }
 
+const deleteMetadata = function(el) {
+    const input = el.closest('.input-metadata')
+    input.remove()
+}
+
 var createEventsListener = function() {
     document.getElementById('form_metadata_add').addEventListener('submit', function(e) {
         let formData = new FormData(this);
@@ -72,6 +85,12 @@ var createEventsListener = function() {
         this.reset();
         e.preventDefault();
     })
+
+    document.addEventListener('click', function (event) {
+        if (event.target.closest(".delete-metadata")) {
+            deleteMetadata(event.target)
+        }
+    })
 }
 
 async function getPDFBlobFromCache(cacheUrl) {