I have a table that consists of one form for every row (kind of inline editing) and some of the fields are of type file. For every of these files I create two buttons:

• upload: upload a new image (grey)
• delete: delete the previous image or do not upload what was selected (red)

What I want is to implement the delete functionality. the buttons look like this:

I already implemented the grey button and I want to avoid to create an extra API Endpoint for the delete image part of the table row.

<div>        
    <label for="{field.id_for_label}">
        <img src="images/x-square.svg">
    </label>
    <button type="button" onlick="delfunc()">
        <img src="images/upload.svg">
    </button>
</div>
<div class="text-body">
    filename: {field.initial}
</div>

How would I define a function onclick that either:

• deletes the just selected input from the grey button and sets it to None or ""
• make the whole form return None or "" for the file field (field.id_for_label) when save button is pressed

Please ignore the django-brackets around var names.

I tried to start with:

var delfunc = function() {document.getElementById('{field.id_for_label}').value = ''};