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

Question

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

<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出现的相应的文件名和一个删除框，我想做到的是点击删除框就能把文件名删了，希望大神解答

Answer 1

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

Answer 2

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