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


Tags: javascript,jquery,css,css3,html5-canvas

Problem :

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();
});   


Solution :

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


    CSS Howto..

    How to get the textarea to be same height as row

    how to make my horizontal css dock navigation to vertical

    CSS - how to set some divs inline

    how to center and Crop an image to square with CSS

    How to replace inline text with images using CSS

    How to test file size on rspec (Rails 4/rspec3)

    select the element before the last using nth child regardless of how many elements you have? [duplicate]

    Modal box doesn't show completely

    How to put a menu over the full width of the page using HTML and CSS?

    How do I position a Silverlight Control

    How to make Gravity Forms Responsive (left/right )?

    How to to change CSS double class properties through script

    How to distribute cell height evenly within a row spanning two cells vertically?

    How to make a vector background image in css instead of using jpg or png

    How can I add text right next to (to the right of) an ellipsis text overflow in CSS?

    How to make a moving dashed border with CSS?

    How to force Visual Studio to honor the BOM at the start of a UTF-8 encoded CSS file?

    How to force style HTML element?

    How to call external CSS in presence of inline and internal?

    how to remove backgrount property of a div from css through jQuery? [duplicate]

    How to make first letter lowercase in span with css?

    How to disable the letter tail from the last letter of a word in CSS?

    How to specify max-height css property to Screen size

    Css how to replace block after click button

    How can I make several divs on the left overlap one div on the right?

    How to do the Height of html tag Body on 100% of browser window size?

    How can I have % of width of an img wrapped in a specific div width?

    How to fill the width under an image with a caption without defining the width of the caption?

    How to change an image on click using CSS alone?

    How does one create a div that extends to the bottom of the page?