$(document).ready(function(){
let count=0;
let btnn=0;
$('.btn').click(function(){
let div1="<div class="+count+"><div>";
let div2="<button id="+btnn+">删除</button>";
$('#result').append(div1,div2);
let activeEditor = tinymce.activeEditor;
let editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
let text = activeEditor.selection.getContent( {'format' : 'text' } );
$('.'+count+'').text(text);
count++;
btnn++;
})
$('#'+btnn+'').click(function(){
$('.'+count+'').remove();
})
})
怎么创建的元素用按钮删不掉了?
因为你的元素是动态创建的,初始的点击事件无法绑定到后来创建的元素上。你需要在每次创建后绑定点击事件,代码修改了下,供参考:
$(document).ready(function(){
let count=0;
let btnn=0;
$('.btn').click(function(){
let div1="<div class="+count+"><div>";
let div2="<button id="+btnn+">删除</button>";
$('#result').append(div1,div2);
//绑定的事件挪到创建的后面
$('#'+btnn+'').click(function(){
$('.'+count+'').remove();
})
let activeEditor = tinymce.activeEditor;
let editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
let text = activeEditor.selection.getContent( {'format' : 'text' } );
$('.'+count+'').text(text);
count++;
btnn++;
})
})
检查一下 是否被选中。
$('#'+btnn+'').click(function(){
$(this).remove();
})
<div class="tiny">
<div id="tinymce_demo"></div>
<div class="container">
<button type="button" class="btn btn-info">发布</button>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/dongtai.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="js/dongtai.js"></script>
<script src="js/jQuery/jquery-3.5.1.min.js"></script>
<script src="tinymce/tinymce.min.js"></script>
<script src="bootstrap-4.1.3/js/bootstrap.min.js"></script>
<title>动态</title>
</head>
<body>
<div>
<img src="images/19.png" alt="图标" id="headimg">
<h1>星空论坛</h1>
</div>
<div id="register_login">
<a href="register.html">登录</a>
/
<a href="login.html">注册</a>
</div>
<div id="header">
<nav>
<ul>
<li>
<a href="index.html">首页</a>
</li>
<li>
<a href="#">动态</a>
</li>
<li>
<a href="data.html">资料</a>
</li>
<li>
<a href="personal.html">个人中心</a>
</li>
</ul>
</nav>
</div>
<div class="tiny">
<div id="tinymce_demo"></div>
<div class="container">
<button type="button" class="btn btn-info">发布</button>
</div>
</div>
<div id="two">
<div class="avatar">
<a href="#"><span>天文爱好者</span></a>
</div>
<div id="five">
<div class="btns">
<span><a href="#">100</a></span>
<span><a href="#">点赞</a></span>
</div>
<div class="btns">
<span><a href="#">8</a></span>
<span><a href="#">关注</a></span>
</div>
<div class="btns">
<span><a href="#">167</a></span>
<span><a href="#">粉丝</a></span>
</div>
</div>
</div>
<div id="result">
</div>
<div id="gotop">
<a href="#">回到顶部</a>
</div>
<footer>
<ul>
<li><a href="https://baike.baidu.com/">关于</a></li>
<li><a href="https://j.map.baidu.com/d9/2pA">站点地图</a></li>
</ul>
<address>
<ul>
<li>QQ:860756315</li>
<li>邮件:yanchouhai@163.com</li>
</ul>
</address>
<p>© 2000-2021 黑洞科技公司版权所有</p>
</footer>
</body>
</html>
window.onload = function () {
window.onscroll = function () {
//将页面的滚动高度存储在scrollHeight变量中
let scrollHeight = window.pageYOffset;
//当页面滚动高度大于300时显示右下角的回到页面顶端
let gotop = document.getElementById('gotop');
if (scrollHeight > 300) {
gotop.style.display = 'block';
} else {
gotop.style.display = 'none';
}
}
//显示文本框内容
$(document).ready(function(){
let count=0;
let btnn=0;
$('.btn').click(function(){
let div1="<div class="+count+"><div>";
let div2="<button id="+btnn+">删除</button>";
$('#result').append(div1,div2);
$('#' + btnn + '').click(function () {
$('.'+count+'').remove();
})
let activeEditor = tinymce.activeEditor;
let editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
let text = activeEditor.selection.getContent( {'format' : 'text' } );
$('.'+count+'').text(text);
count++;
btnn++;
})
})
//tinymce富文本编辑器
tinymce.init({
selector: '#tinymce_demo', //容器,可使用css选择器
language:'zh_CN', //调用放在langs文件夹内的语言包
toolbar: true, //工具栏
menubar: true, //菜单栏
branding:false, //右下角技术支持
inline: false, //开启内联模式
elementpath: false,
min_height:300, //最小高度
height: 800, //高度
width:700,
skin: 'oxide',
toolbar_sticky:true,
visualchars_default_state:true, //显示不可见字符
image_caption: true,
paste_data_images: true,
relative_urls : false,
removed_menuitems: 'newdocument', //清除“文件”菜单
plugins: "lists,hr, advlist,anchor,autolink,autoresize,charmap,code,codesample,emoticons,fullscreen,image,media,insertdatetime,link,pagebreak,paste,preview,print,searchreplace,table,textcolor,toc,visualchars,wordcount", //依赖lists插件
toolbar: 'bullist numlist anchor charmap emoticons fullscreen hr image insertdatetime link media pagebreak paste preview print searchreplace textcolor wordcount',
//选中时出现的快捷工具,与插件有依赖关系
images_upload_url:'a.php', /*后图片上传接口*/ /*返回值为json类型 {'location':'uploads/jpg'}*/
setup: function(editor){
editor.on('change',function(){ editor.save(); });
}
});
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div class="box">
<div class="box1"></div>
<button class="btn">111</button>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
let count=0;
let btnn=0;
$('.btn').click(function(){
let div1=$("<div class="+count+">"+count+"<div>");
let div2=$("<button id="+btnn+">删除</button>");
$('.box1').append(div1);
$('.box1').append(div2);
$('#'+btnn+'').click(function(){
$(this).prev().remove();
$(this).remove();
})
count++;
btnn++;
})
})
</script>
</body>
</html>