我将在div中放置一个删除按钮，以便用户单击删除按钮，然后div将被删除。但是目前有2个问题。
（1）我放置的按钮与div中的文本未正确对齐
（2）按钮单击事件不起作用。
请看我的HTML
$("#slider").on("change",function(){
var v=$(this).val();
$('.text.active').css('font-size', v + 'px');
});
$('.text').on('focus',function(){
$('.close-icon').addClass('active');
$('.text').removeClass('active');
$(this).addClass('active');
});
$(".close-icon.active").on("click",function(){
alert('hiii');
});.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
background-color: #FA9595;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: white;
font-weight: normal;
font-size: 12px;
box-shadow: 0 0 2px #E50F0F;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="12" max="120" id="slider" />
<div class="text" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton" type="reset"></div>
<div class="text text1" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton1" type="reset"></div>
<div class="text text2" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton2" type="reset"></div>
<div class="text text3" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton3" type="reset"></div>请帮忙解决这个问题。
您的代码几乎是正确的，只需要很少的更新。
CSS：
更改position与float
/*position: absolute;*/
float:right;
脚本：
您的元素是动态的，这就是事件未绑定的原因。请尝试以下。
$(document).on("click",".close-icon",function(){
$(this).closest('div').remove();
//alert('hiii');
});
这是工作小提琴
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句