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 use nav-pill with nav-justified from bootstrap3x without responsive features

    How to leave some top gap for H2 title tag with css

    How can change the style of
      tag in CSS

    FontAwesome icon showing as black box. What CSS is needed to display icon?

    How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?

    Dropdown container not showing right padding

    How to keep div height fixed during changing its content?

    How to Make CSS Work on 404 Error Page?

    How to make a circular button out of a PNG image?

    My sidebar is not going to right of my page, but to my left. How do I fix this?

    how to apply css to extjs grid emptytext?

    • centered, not moving down.. unsure why / how to fix

    How to Prefix this Input element, using CSS

    How to include border-radius.htc in MVC architecture to make border-radius work in IE

    How to define CSS anchor text decoration for anchors in a specific container

    How do I add a div under a right floated div?

    Jquery how to add :hover to css style sheet

    How to increase rotate value

    How to give background image in CSS? [closed]

    JavaScript: How to get a dynamically created element's width?

    Need to compress CSS and JavaScript via PHP but need to know performance implications and how to implement?

    how to make website more user friendly for mobile users [closed]

    How to create a function in which a box moves in accordance with 2 user inputs (direction and # of pixels to move)

    How to add CSS to my HTML code on Notepad++

    How to create a pop up animation with a modal using css?

    how to select the 2nd child Div of a div using CSS

    How can I add a hover event to multiple paths in a SVG? And have it work in IE9?

    How to position two divs horizontally within another div

    How to set css style dynamically with angularjs?

    How to reference css in actionlink?