Collection form: add a button to remove added books

front/src/CollectionFormElement.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   isDragoverFromAbove: Boolean,
 })
 
-const emit = defineEmits(['positionchange', 'startgrab', 'stopgrab', 'grabbing'])
+const emit = defineEmits(['positionchange', 'startgrab', 'stopgrab', 'grabbing', 'delete'])
 
 const vFocus = {
   mounted: (el) => el.focus(),
@@ -109,6 +109,9 @@ function onPointerMove(e) {
           <div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
             <b-icon-list />
           </div>
+          <div @click="$emit('delete')" class="centered closebtn clickable">
+            <b-icon-x />
+          </div>
         </template>
       </BookListElement>
     </div>
@@ -153,7 +156,6 @@ function onPointerMove(e) {
   color: var(--bulma-scheme-main);
   font-size: 48px;
   margin-left: 30px;
-  margin-right: 30px;
   border-top-right-radius: var(--bulma-box-radius);
   border-bottom-right-radius: var(--bulma-box-radius);
   cursor: grab;
@@ -169,6 +171,12 @@ function onPointerMove(e) {
   border-radius: 10px;
 }
 
+.closebtn {
+  height: 40px;
+  width: 40px;
+  font-size: 36px;
+}
+
 @media (max-width: 1024px) {
   .inputpositionwidget {
     margin-top: 10px;