enter code hereenter code here`ok so i've an image, i'm making another image append to it on the click of a button. image appends, and i get the coordinates of the location. Also i've made the image draggalbe using jquery ui. everytime an image is appended, a div is also generated with states the coordinates and the region of the image which was clicked. in that newly generated div there is a delete button that deletes that division. i need to make that delete button also delete the specific image that is getting appended corresponding to that div . i'd really appreciate any help regarding this thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MyMapImage</title>
<style type="text/css">
#container {
background: green;
width: 596px;
height: 218px;
position: relative;
cursor: crosshair;
}
#container img {
position: absolute;
opacity:0.95;
}
#container img.cross {
position: absolute;
}
</style>
<style type="text/css">
#draggable {font-size:x-large; border: thin solid black; width: 5em; text-align: center}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".WindSh").click(function(e) {
e.preventDefault();
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var img = $('<img>');
img.css('top', y-23);
img.css('left', x-23);
img.attr('src', 'cross.png');
img.attr('class','cross');
img.appendTo('#container');
img.draggable({
containment: "parent"
});
})
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.WindSh').click(function(e) {
var offset = $(this).offset();
var xz= e.clientX - this.offsetLeft;
var yz= e.clientY - offset.top;
if (parseInt(xz)>= 38 && parseInt(xz)<=200 && parseInt(yz)>=15 && parseInt(yz)<=98)
{
$('<div/>').append((xz) + ", " + (yz) + " ; " + "You have selected Region 1")
.appendTo('#coordinates');
}
else if (parseInt(xz)> 200 && parseInt(xz)<=401 && parseInt(yz)>=15 && parseInt(yz)<=98)
{
$('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 2")
.appendTo('#coordinates');
}
else if (parseInt(xz)> 401 && parseInt(xz)<=540 && parseInt(yz)>15 && parseInt(yz)<=98)
{
$('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 3")
.appendTo('#coordinates');
}
else if (parseInt(xz)> 12 && parseInt(xz)<=200 && parseInt(yz)>98 && parseInt(yz)<=186)
{
$('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 4")
.appendTo('#coordinates');
}
else if (parseInt(xz)> 200 && parseInt(xz)<=401 && parseInt(yz)>98 && parseInt(yz)<=186)
{
$('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 5")
.appendTo('#coordinates');
}
else if (parseInt(xz)> 401 && parseInt(xz)<=540 && parseInt(yz)>98 && parseInt(yz)<=186)
{
$('<div/>').append ((xz) + ", " + (yz) + " ; " + "You have selected Region 6")
.appendTo('#coordinates');
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.hide').click(function(){
$('.cross').hide();
});
});
</script>
</head>
<body
<div id="container"><img class="WindSh" src="WindShield.png"></div>
<div>Coordinates x,y: <span id="coordinates"></span></div>
<input type="button" class="hide" value="hide">
</body>
</html>
So i've to make this image x append on top of another image y. image x should give coordinates where it is getting appended on image y. 2nd, when image x gets appended, it opens another div in which it displays the coordinates of where image x was appended. in that div also there is a delete button. delete button currently deletes that row, but i also want that delete button to delete that image that was appended corresponding to that div. thnx