javascript - 在 server.javascript jquery 中删除文件时如何删除网站中的 str(name+size+cancel)

Question

我使用ajaxsubmit上传文件到linux服务器。上传文件成功后，文件名+文件大小+取消按钮将出现在我的网站上。这是我的html代码:

<style type="text/css">
.files{height:10px; font-size:10px;line-height:22px; margin:10px 0}
</style>
<div class="files"></div>

我的ajaxsumit代码是:

$("#myupload").ajaxSubmit({
        dataType:  'json',
       ......
success: function(data) {
files.html(files.html()+"<br />"+"<b id='dataname'>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"' id='cancelbtn'>cancel</span>");
 },
 ......

当点击取消按钮时，文件名+文件大小+取消按钮将消失。这是我的js代码:

$(document).on('click',".delimg",function(){
    var filename = $('#dataname').val()+"cancel";
            files.html(files.html().replace(new RegExp(filename,"g"),""));
});

不幸的是，它失败了。这是我想实现的示例。在单击“取消”之前，我的文件 div 内容是:

1.jpg(10.36k) cancel
2.jpg(10.36k) cancel
3.jpg(10.36k) cancel

当我点击第二个取消后，我的文件div内容是:

1.jpg(10.36k) cancel
3.jpg(10.36k) cancel

谁能帮助我？

Answer 1

问题是id='dataname .

您不能多次使用相同的 id .
使用类来代替。 More reading about it在这里。

所以...
<b class='dataname'>
而不是
<b id='dataname'>

并删除无用的id='cancelbtn' .

那么你的点击事件处理程序应该是:

$(document).on('click',".delimg",function(){
    $(this).prev('.dataname').remove(); // removes the filename
    $(this).remove(); // Removes the "cancel"
});

这里不需要正则表达式。
您有类来定位要删除的元素。

正则表达式用于定位字符串中的字符模式。