极客观点
项目管理
HarmonyOS
如题，我想做的是单击添加按钮，添加一个新的元素，单击删除按钮，这个元素删除，再次单击添加的时候，会出现两个这样的元素？官方的解释是这样的：
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
请问我该怎么删除，才能避免这种情况呢？
删除之后，第二次添加，页面会出现两个：
这是js代码部分：
var editor = new wangEditor('textarea');
//上传图片路径
editor.config.uploadImgUrl = '/Wap/WapUserFileUpload/FileUpload';
// 表情
editor.config.emotions = {
'default': {
'title': "默认",
'data': '/depend/wangEditor/test/emotions.js'
}
}
editor.config.menus = [
'img',
'goimgs'
];
editor.UI.menus.img = {
normal: '<div class="selectImage">选择图片</div>'
}
editor.UI.menus.imgs = {
normal: '<div class="goimgs">插入链接</div>'
}
//显示添加图集页面
function show_imgspage() {
var appedStr = '<div id="imgs_page"><form><textarea class="imgspage_txt" placeholder="图集说明..."></textarea>' +
'<div class="Imgs_box"><div class="Img_box Add_img">' +
'<div class="addbtn_box"><img src="images/Camer.png"/><input class="upload-file" id="upload-file" type="file" onchange ="uploadFile(this,1)" name="file" capture="camera" accept="image/*" cropid="1"></div>' +
'<p>添加项目图片</p>' +
'</div>' +
'</div>' +
'<div onclick="insertLink()" id="sub_addimgs">完成添加</div></form></div>';
$(".goimgs_btn").click(function () {
console.log("显示添加图集");
$("#post_report").after(appedStr);
});
}
// 隐藏掉插入网络图片功能。该配置，只有在你正确配置了图片上传功能之后才可用。
editor.config.hideLinkImg = true;
editor.create();
//选择图片上传服务器
function uploadFile(obj, type) {
var a = $("upload-file").val();
console.log(a)
$.ajaxFileUpload({
url: "http://www.iduilv.com/Wap/WapUserFileUpload/FileUpload",
secureuri: false,// 一般设置为false
fileElementId: "upload-file",// 文件上传表单的id
dataType: 'json',// 返回值类型 一般设置为json
data: { 'type': type, "type2": 2 },
success: function (data) // 服务器成功响应处理函数
{
//成功后将图片出入的页面
var src = data.src;
var addStr = '<dl class="Imgbox"><dt>' + '<img src=' + src + '/><img class="close" onclick="delImgbox()" src="images/icon_close.png"/></dt>' +
'<dd><input id="imgtxt" placeholder="添加文字描述"/></dd>'
'</dl>';
var Add_img = $(".Imgs_box .Add_img");
//按钮块之前插入图片
Add_img.before(addStr);
console.log("上传成功");
},
error: function (data)// 服务器响应失败处理函数
{
console.log("服务器异常");
}
});
return false;
}
//删除图片块
function delImgbox() {
$(this).parent().parent().remove();
}
//完成添加后输入框插入链接
function insertLink() {
console.log("完成添加");
editor.command(null, 'insertHtml', '<p onclick="show()">百度！</p>');
$("#imgs_page").remove();
}
html5
应该是那个
show_imgspage()里的问题，里边你注册了个click事件回调，但是在remove时并没注销掉，导致每次调用这个函数就会多注册个事件，所以你每次触发click时，生成的DOM也是成倍增长的。至于解决，看你这个
show_imgspage()好像本来就是挂在.goimgs_btn的onclick上的，要不你干脆删掉这个onclick属性好了，然后把show_imgspage()打开，写成：这样不就得了~
另外建议，不要on-和js的事件监听混用~~