I have a ticket as you can see in the picture below:

I have a delete button as a component and I am trying to add delete functionality to it. I am using this component in my ticket component. So this is my delete component:

<template>
        <div id="delete-button" @click.prevent="removeProductFromCart(item.id)">
            <input type="checkbox" id="checkbox">
            <div id="bin-icon">
                <div id="lid"></div>
                <div id="box">
                    <div id="box-inner">
                        <div id="bin-lines"></div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    import cartHelper from "../helpers/cartHelper";
    
    export default {
        props: {
            item: Object,
        },
        data() {
            return {
                loading: false,
            };
        },
        methods: {
            removeProductFromCart(id) {
                this.loading = true;
                setTimeout(() => {
                    cartHelper.removeFromCart(id, (response) => {
                        this.$store.dispatch('removeProductFromCart', {
                            cart: response.data,
                        })
                        this.loading = false
                    });
                }, 1000)
            }
        }
    };
    </script>

So the parent component is ticket component:

[![<template>
    <div id="sold-tickets">
        <div class="card">
            <div class="sold-tickets-actions properties">
                <div class="sold-tickets-inner">
                    <DeleteButton :item = "item"  />
                </div>
            </div>
        </div>
    </div>
</template>][1]][1]

<script>
import image from "../../../../img/Hallenbad.jpg";
import DeleteButton from "./DeleteButton";
import cartHelper from "../helpers/cartHelper";

export default {
    props: {
        item: Object,
    },
    components: {DeleteButton},
    data() {
        return {
            image: image,
        };
    },
};
</script>

My problem is, the ticket is being deleted even when I click outside of the child component (Delete component). But I want to use the delete component like a button and I only want to delete the ticket when it is clicked, not outside of the button.