Remove Specific HTML Component After Successful Response With JavaScript Fetch API

I have an image component where the user has the option to delete the component (basically the image). The deletion in the MySQL database is handled by PHP, and I use the javascript fetch() API on form submission so that no hard refresh happens on the page when this happens. All of this works OK.

The Problem

The issue I have is there will virtually always be multiple instances of the component in the form, so after the fetch happens I obviously only want to remove the specific component that is tied to its related delete button. To do this I understand I need to use the remove() method on the component/HTML.

Normally with events such as click I would use something like e.target.closest('.element').querySelector('.child-element') but the issue I have is I need to link the remove() method to the e.submitter event, because I only want to remove that specific component that is linked to its delete button, and I want to do this after getting a 200 response to show the deletion happened in the database.

In the javascript below, the specific button used on delete submission is referenced using e.submitter, but I guess I need to find a way of storing that as a variable that I can then use in the if(response.status === 200) {} line of code ?

JavaScript

const forms = document.querySelectorAll('.upload-form-js'),
uploadDetailsComponent = document.querySelectorAll('.upload-details-component')

// URL details
const myURL = new URL(window.location.href),
pagePath = myURL.pathname

if (forms) {
    forms.forEach((form) => {
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            
            const formData = new FormData(this);
        
            if (e.submitter) {
                formData.set(e.submitter.name, e.submitter.value);
            }
        
            fetch(pagePath, {
                method: "post",
                body: formData
            })
                .then(function(response){
                return response.text(); // stops hard refresh of the page
            })
                .catch((e) => console.error(e));
        });

        if(response.status === 200) {

            // remove the specific component linked to the 'submit' event using the 'remove()' method

        }

    });
} // end of if (forms)

HTML There are multiple instances of the image component inside the form. In the HTML below I’ve just shown two instances

<section>
    <form class="upload-form-js" enctype="multipart/form-data" method="post">
        <div class="upload-details-component">
            <div class="image-wrapper">
                <img src="image.jpg" alt="image">
            </div>
            <button type="submit" name="delete" title="delete" value="12" class="dl-button">Delete</button>
            <input type="hidden" name="image-id" value="12">
        </div>
        <div class="upload-details-component">
            <div class="image-wrapper">
                <img src="image.jpg" alt="image">
            </div>
            <button type="submit" name="delete" title="delete" value="13" class="dl-button">Delete</button>
            <input type="hidden" name="image-id" value="13">
        </div>
    </form>
</section>