Удалить определенный компонент HTML после успешного ответа с помощью JavaScript Fetch API

У меня есть компонент изображения, где у пользователя есть возможность удалить компонент (в основном изображение). Удаление в базе данных MySQL обрабатывается PHP, и я использую JavaScript fetch()API при отправке формы, чтобы при этом не происходило жесткого обновления страницы. Все это работает нормально.

Эта проблема

У меня проблема в том, что практически всегда будет несколько экземпляров компонента в форме, поэтому после того, как произойдет выборка, я, очевидно, хочу удалить только конкретный компонент, который привязан к связанной с ним кнопке удаления. Я понимаю, что для этого мне нужно использовать remove()метод для компонента/HTML.

Обычно с такими событиями, как clickя, я бы использовал что-то вроде, e.target.closest('.element').querySelector('.child-element')но проблема в том, что мне нужно связать remove()метод с e.submitterсобытием, потому что я хочу удалить только тот конкретный компонент, который связан с его кнопкой удаления, и я хочу сделать это после получение 200ответа, чтобы показать, что удаление произошло в базе данных.

В приведенном ниже javascript конкретная кнопка, используемая при отправке удаления, упоминается с помощью e.submitter, но я думаю, мне нужно найти способ сохранить это как переменную, которую я затем могу использовать в if(response.status === 200) {}строке кода?

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 В форме есть несколько экземпляров компонента изображения. В приведенном ниже HTML я только что показал два экземпляра

<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>

Решение проблемы

Вы можете использовать closest()метод для поиска компонента изображения, ближайшего к кнопке, возвращаемой e.submitter.

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(); // this stops hard refresh of the page
 
 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){
  // you already have the response at this point. 
  // Give a callback if required.
  if(response.status === 200) {
  // remove the specific component linked to the 'submit' event using the 'remove()' method. 
  // 'closest()' will go up the DOM hierarchy 
  e.submitter.closest('.upload-details-component').remove()
  }
  return response.text(); 
 })
 .catch((e) => console.error(e));
 });
 });
 } // end of if (forms)