Nithin Nithin - 1 month ago 6
CSS Question

Click event is not working in contenteditable div

i am going to place a delete button in the div so that user click the delete button then div will be deleted . But currently there were 2 problem .

(1)The button i placed is not properly aligned with the text in the div

(2)The button click event is not working .

Please see my 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>





Please help to solve this .

Answer

Your code is almost right just need few updates.

CSS:

Change position with float

/*position: absolute;*/
float:right;

Script:

Your element is dynamic and that's why the event is not binding. Try following.

$(document).on("click",".close-icon",function(){

$(this).closest('div').remove();
//alert('hiii');

});

Here is working Fiddle

Comments