javascript - jQuery 无法删除 AJAX 上的多个相邻元素成功

Question

我试图弄清楚为什么我无法在成功的 ajax DELETE 上删除多个相邻元素。当我在下面的代码中单独使用 $(".file-preview").filter("a[href='"+ fileLink + "']").remove(); 时，我能够删除第一个链接，当我在其后添加 $(".remove-file").data("file-link", fileLink).remove(); 时，它会破坏第一个链接.remove() 语句并删除所有存在的 .remove-file，忽略传递给 data-file-link 属性的值链接。

1) 为什么第一个删除会被第二个删除破坏？

2)是否有更好的方法来实现我想要实现的目标，即在单击 .remove-file 时删除两个相邻元素？

以下是 HTML 的示例:

<div class="file-section>
    <div class=" file-preview ">
    <a href="https://test-bucket.s3.amazonaws.com/1/2017-01-30/screen-shot-2017-01-08-at-12.23.39-pm.png ">https://test-bucket.s3.amazonaws.com/1/2017-01-30/screen-shot-2017-01-08-at-12.23.39-pm.png</a>
    <a href="# " class="remove-file " data-file-link="https://test-bucket.s3.amazonaws.com/1/2017-01-30/screen-shot-2017-01-08-at-12.23.39-pm.png "><span class="glyphicon glyphicon-remove "></span></a>
    </div>
    <div class=" file-preview ">
    <a href="https://test-bucket.s3.amazonaws.com/1/2017-01-30/screen-shot-2017-01-08-at-12.23.39-pm.png ">https://test-bucket.s3.amazonaws.com/1/2017-01-30/screen-shot-2017-01-08-at-12.23.39-pm.png</a>
    <a href="# " class="remove-file " data-file-link="https://test-bucket.s3.amazonaws.com/1/2017-01-30/screen-shot-2017-01-08-at-12.23.39-pm.png "><span class="glyphicon glyphicon-remove "></span></a>
    </div>
</div>

jQuery:

 $(document).on('click', '.remove-file', function(){
        console.log('Delete Triggered');
        var fileLink = $(this).data('file-link');

        function pathExtract(url){
            var fullUrl = url;
            var delimiter = '/';
            var start = 3;
            var tokens = fullUrl.split(delimiter).slice(start);
            var path = tokens.join(delimiter);
            return path;  
        }

        $.ajax({
            url: '/app/sign?' + $.param({"file": pathExtract(fileLink)}),
            type: 'DELETE',
            success: function(){
                console.log('This is the file link ' + fileLink);
                $(".file-preview").filter("a[href='" + fileLink + "']").remove();
                $(".remove-file").data("file-link", fileLink).remove();
            },
            error: function(error){
                console.log('error ' + JSON.stringify(error));
            }
        });
    });

Answer 1

.data("file-link", fileLink)不是过滤器，它设置所选元素的数据。它只是返回它被调用的相同集合，因此当您调用 .remove() 时在结果上，它删除了所有带有 remove-file 的元素类。

如果您只想删除具有该数据值的元素，请使用 .filter() :

$(".remove-file").filter(function() {
    return $(this).data("file-link") == fileLink;
}).remove();

这段代码:

$(".file-preview").filter("a[href='" + fileLink + "']").remove();

不起作用，因为 a元素位于 .file-preview 内DIV，但是.filter()测试元素本身是否与过滤器匹配。你应该写:

$(".file-preview:has(a[href='" + fileLink + "'])").remove();

测试内容。