How to make a close button for each image inside the div using CSS and js

Question

How to make close button for each images on hover? There is a div in which each image is draggable.

I need to make a close button near to each image. That button need to visible only when we touch or moving mouse pointer on the image, that is the button need to show in it's hover effect.

This is my HTML

$( function() {
 var a = 1;
  $( ".child" ).draggable({
    containment: "parent",
    start: function(event, ui) { $(this).css("z-index", a++); }
  });
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="parent" style="z-index:1; min-height: 200px; background-image: url('http://img.freepik.com/free-vector/white-canvas-background_1053-239.jpg?size=338&ext=jpg')">
     <img src ='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' style='position: absolute; z-index:1' class='child' />
     <img src =' https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' style='position: absolute; z-index:1' class='child' />
     
     <img src =' https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Candy-01-128.png' style='position: absolute; z-index:1' class='child' />
    
 </div>

JSFiddle demo

I know how to remove that image using jquery. for example the code like this

$(document).on("click",".closeButton",function(){
    $(this).closest('.child').remove();
});

Artur Filipiak · Accepted Answer · 2016-10-30T11:59:07.837

0

Wrap each image with separate div, add .child class to that div instead of image:

<div class="parent">
  <div class='child'>
    <img src ='https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png' />
  </div>
  <div class='child'>
    <img src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Wand-128.png' />
  </div>
  <div class='child'>
    <img src ='https://cdn2.iconfinder.com/data/icons/free-color-halloween-icons/24/Candy-01-128.png' />
  </div>
</div>

and then:

var a = 1;
$( ".child" ).draggable({
  containment: "parent",
  start: function(event, ui) { $(this).css("z-index", a++); }
}).hover(function(){
  $(this).prepend('<button class="remove">x</button>');
}, function(){
  $(this).find('.remove').remove();
}).on('click', '.remove', function(){
  $(this).closest('.child').remove();
});

JSFiddle Demo

edited Oct 30 '16 at 11:59

answered Oct 30 '16 at 11:38

Artur Filipiak

9,027
4
30
56

1

Really thank you friend . I have another doubt on this question . I will make it as other question and past here – Oct 30 '16 at 11:44
but what happen for some reason i cannot Wrap each image with separate div . How to solve this situation ? – Oct 30 '16 at 11:57
Is this a real life situation or just an example scenario? Nothing is impossible but this would require some dirty hacks... – Artur Filipiak Oct 30 '16 at 12:05
please see this question http://stackoverflow.com/questions/40329075/how-to-make-image-control-button-for-each-image-inside-the-div-using-css-and-js . This is my doubt . I make it as separated question so that every other user can understand how to do this . – Oct 30 '16 at 12:30

How to make a close button for each image inside the div using CSS and js

1 Answers1