我试图弄清楚为什么我无法在成功的 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));
}
});
});
最佳答案
.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();
测试内容。
关于javascript - jQuery 无法删除 AJAX 上的多个相邻元素成功,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41948017/