how to show delete button for modelformset – django

I’m trying to implement an application, which is has two models : Booking and Visitor each booking needs to have several Visitors, so the Visitor should be a formset in order to add several Visitors, but sometimes we need remove unwanted form from the Visitor, {{form.DELETE}} shows a checkbox, but i dont want it be a button, and remove the form right after clicking the button, i need to change here is my models

class Booking(models.Model):
    admin = models.ForeignKey(User,on_delete=models.CASCADE,default=1)
    room_no = models.ForeignKey(Room,on_delete=models.CASCADE,blank=True,related_name="rooms")
    name = models.CharField(max_length=40,default="",blank=True,null=True)

class BookingVisitor(models.Model):
    admin = models.ForeignKey(User,on_delete=models.PROTECT,related_name="visitor_admin")
    booking = models.ForeignKey(Booking,on_delete=models.CASCADE,related_name="booking_bookingvisitors")
    visitor_name = models.CharField(max_length=50)

my forms is simple modelform

VisitorBookingFormset = modelformset_factory(model=BookingVisitor,form=BookingVisitorForm,can_delete=True)

and here is my views

def createBooking(request):
    main_form = BookingForm()
    visitor_forms = VisitorBookingFormset(queryset=BookingVisitor.objects.none(),prefix='formset')
    if request.method == 'POST':
        main_form = CustomerInvoiceForm(request.POST)
        visitor_forms = VisitorBookingFormset(request.POST,prefix='formset')
        if main_form.is_valid() and visitor_forms.is_valid():
            main_obj =
            main_obj.admin = request.user
            for form in visitor_forms:
                if form.is_valid():
                    form_obj =
           = main_obj

            return JsonResponse({'success':True})
            return JsonResponse({'success':False,'error_msg_mainform':main_form.errors,'error_msg_visitorform':imei_forms.errors})

    context = {
    return render(request,'booking/booking.html',context)

and here is my template form

            <form action="" method="POST" id="create-booking">{% csrf_token %}        
            <div class="row">             
                <!-- /.col -->
                <div class="col-md-4 pull-right">
                    <div class="form-group">
                    <label>room no</label>
                    {{main_form.room_no | add_class:'form-control text-center'}}
                 <div class="col-md-4 pull-right">
                    <div class="form-group">
                    {{| add_class:'form-control text-center'}}
            <div id="form-imeilists">
                {% for visitor in visitor_forms %}
                <div class="child_imeiforms_row">

                        <div class="col-md-10">
                            <div class="form-group">
                                {{visitor.visitor_name | add_class:'name'}}
                {% endfor %}
             <div id="empty-visitor-invoiceform" class="hidden">
                    <div class="col-md-10">
                        <div class="form-group">
                            {{visitor.empty_form.visitor_name | add_class:'name'}}
            <button type="button" class="btn btn-lg btn-info" id="add-more-invoice">add new row</button>

            <div class="card-footer">
                <div class="row justify-content-center">
                    <button type="submit" class="btn btn-lg btn-success">save</button>

thank you in advance ..


Python Wrapper for interacting with the Flutterwave API

Instagram Clone developed with Flutter & Firebase