Click事件在contenteditable div中不起作用

Question

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 1

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

Answer 2

If have you modify any div after page load. Those changes are not registered in DOM. So you need to target unchanged element as parent. Better thing is you can target document or body tag.

<script>
$(document).on("click",".close-icon",function(){
alert('hiii');    
});

$("body").on("click",".close-icon",function(){
alert('hiii');    
});
</script>

See below code snippet final working code.

 $("#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'); }); $(document).on("click",".close-icon.active",function(){ $(this).parent("div").remove(); }); 

 .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: relative; background-color: #FA9595; z-index:1; left: 100%; 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> 

Answer 3

If i get you right, here is the right code for your task

<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"></button></div>
    <div class="text text1"  contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton1" type="reset"></button></div>
    <div class="text text2"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton2" type="reset"></button></div>
    <div class="text text3"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton3" type="reset"></button></div>

No need for absolute position of icon

.close-icon {
        border:1px solid transparent;
        background-color: transparent;
        display: inline-block;
        vertical-align: middle;
      outline: 0;
      cursor: pointer;
      position: relative;
    }
    .close-icon:before {
        content: "X";
        display: block;
        width: 15px;
        height: 15px;
        background-color: #FA9595;
        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;
    }

For me "click" worked well - I just put final code into function

$("#slider").on("change",function(){
       var v=$(this).val();
       $('.text.active').css('font-size', v + 'px');
    });

    $('.text').on('focus',function(){
        $('.text').removeClass('active');
        $(this).addClass('active');
    });

    $(".close-icon").on("click",function(){
        $(this).parent().remove();
    });

Check how it works here: https://jsfiddle.net/6ek8c0eq/

Answer 4

Position absolute element should be wrapped by an position relative element else it will absolute to the window's position.

Use should remove the parent of the button to remove the entire node.So, use parent and remove

 $("#slider").on("change", function() { var v = $(this).val(); $('.text.active').css('font-size', v + 'px'); }); $('.text').on('focus', function() { $('.text').removeClass('active'); $(this).addClass('active'); }); $(".close-icon").on("click", function() { $(this).parent().remove() }); 

 .close-icon { border: 1px solid transparent; background-color: transparent; display: inline-block; vertical-align: middle; outline: 0; cursor: pointer; } .text{ position: relative; margin: 20px 0; } .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>