给button添加一个点击事件，删除他前面的p元素，请问该怎么写。

下面是源代码，求大神指教啊！！！

<input type="file" name="" id="fileIds1" multiple />

<div id="fangInput"></div>

<script type="text/javascript">
$("#fileIds1").change(function(){   

console.log(1);

var fileObj1 = document.getElementById("fileIds1").files; // js 获取文件对象

for(var i = 0; i < fileObj1.length; i++) {

var btnC = 'del-btn' 

$("#fangInput").append('<p for="message-text" class="control-label" style="width: 100%;height: auto;word-wrap:break-word;word-break:break-all;overflow: hidden">文件名：' + 
fileObj1[i].name + 
' <button type="button" onclick="fangDelete()" class= btnC style="background-color:#dc4739;color:#fff;margin-top:3px">删除文件</button>');
}

console.log(fileObj1);


})
function fangDelete(){

console.log(event);

var fangInput=document.getElementById("fangInput");

console.log(fangInput);

var lis=fangInput.getElementsByTagName("button");

console.log(lis);   

}   
</script>

这段代码是当Input的值发生变化时，下面的div出现的相应的文件名和一个删除框，我想做到的是点击删除框就能把文件名删了，希望大神解答

编辑于：2018.10.08 00:55 发布于：2018.10.07 01:43

javascript 前端 jquery

| 评论0 | 收藏 | 浏览1612 |

: fangBlood

声望： 14

2个回答

按赞数排序

$("#fileIds1").change(function() {
    console.log(1);
    var fileObj1 = document.getElementById("fileIds1").files; // js 获取文件对象
    for (var i = 0; i < fileObj1.length; i++) {
        var btnC = 'del-btn'
        $("#fangInput").append('<p for="message-text" class="control-label" style="width: 100%;height: auto;word-wrap:break-word;word-break:break-all;overflow: hidden">文件名：' +
            fileObj1[i].name +
            ' <button type="button" onclick="fangDelete(this)" class= btnC style="background-color:#dc4739;color:#fff;margin-top:3px">删除文件</button></p>');
    }
    console.log(fileObj1);
})

function fangDelete(t) {
    $(t).closest("p").remove();

}

发布于：2018.10.07 08:13

评论 2 |

| 已采纳

: 天际的海浪

声望： 3404

: 天际的海浪 回复fangBlood: https://www.jb51.net/article/93935.htm; 接近 2 年之前回复

: fangBlood 能不能再问一下我索然吧父元素P删掉了，可实际input(file)里的值还是没有改变，如何再删除的点击事件里，再把当前fileObj1[i].name删除啊; 接近 2 年之前回复

 $("#fangInput").append('<p for="message-text" class="control-label" id=msg' + i 

$("p").remove();+ 'style="width: 100%;height: auto;word-wrap:break-word;word-break:break-all;overflow: hidden">文件名：' + 
fileObj1[i].name + 
' <button type="button" onclick="fangDelete(" + i + ")" class= btnC style="background-color:#dc4739;color:#fff;margin-top:3px">删除文件</button>');
}


function fangDelete(i){
$("#msg" + i).remove();
}

发布于：2018.10.07 02:54

评论 0 |