在AJAX成功时，jQuery无法删除多个相邻元素

Question

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

(一)为什么第一次移除会被第二次移除打破？

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();

来测试内容。