使用 JavaScript Fetch API 成功响应后删除特定 HTML 组件

Question

我有一个图像组件，用户可以选择删除该组件（基本上是图像）。 MySQL 数据库中的删除由 PHP 处理，我在表单提交时使用 JavaScript fetch() API 这样页面就不会发生硬刷新当这件事发生时。所有这一切都正常。

问题

我遇到的问题是表单中几乎总是有组件的多个实例，因此在提取发生后，我显然只想删除与其相关的删除按钮相关联的特定组件。为此，我知道我需要在 component/HTML.

上使用 remove() 方法

通常对于 click 之类的事件，我会使用 e.target.closest('.element').querySelector('.child-element') 之类的东西，但我遇到的问题是我需要 link remove() 方法到 e.submitter 事件，因为我只想删除 linked 到其删除按钮的特定组件，并且我想在收到 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>

Answer 1

您可以使用 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)

使用 JavaScript Fetch API 成功响应后删除特定 HTML 组件

Remove Specific HTML Component After Successful Response With JavaScript Fetch API

html

javascript

submit

fetch

dom-events