this is my html code for aove fig..... when i click on delete (id ="outdelete") total div (id="rightoutimage") should be deleted.......................
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></a></li>
<li id="outdelete"><a href="#" onClick="deleteImg(outdelete)"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
<li id="outfullscreen"><a href="#"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></a></li>
<li id="outshare"><a href="#"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share"></a>
<div id="menu">
<div id="tooltip_menu">
<a href="#" class="menu_top" id="email"> <img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter"><img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save"><img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
</div>
</div>
</li>
<li id="outprint"><a href="#"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a></li>
</ul>
</div>
this is my scripting code........
<script>
function deleteImg(id11) {
id11 = document.getElementById("outdelete");
$('#+id11').remove();
}
</script>
$('#outdelete').click(function(){
$("#rightoutputimgae").remove();
});
Change:
<li id="outdelete"><a href="#" onClick="deleteImg(outdelete)">
to:
<li id="outdelete"><a href="#" onClick="deleteImg(this)">
and your JS code:
<script>
function deleteImg(self) {
$(self).parents('#rightoutputimgae').get(0).remove();
}
</script>
Here's another option for you, which you can see a working example here: http://jsfiddle.net/TdLSy/
$(document).ready(function(){
$("li a").click(function(event){
event.preventDefault();
$(this).find('img').remove();
});
});
Along with your original HTML code:
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></a></li>
<li id="outdelete"><a href="#" onClick="deleteImg()"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete" /></a></li>
<li id="outfullscreen"><a href="#"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></a></li>
<li id="outshare"><a href="#"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share"></a>
<div id="menu">
<div id="tooltip_menu">
<a href="#" class="menu_top" id="email"> <img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter"><img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save"><img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
</div>
</div>
</li>
<li id="outprint"><a href="#"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a></li>
</ul>
</div>
Try this:
document.getElementById("rightoutimage").addEventListener("click", function(e) {
if(e.target.id === "outdelete") {
var parent = e.target.parentNode;
parent.parentNode.removeChild(parent);
}
});
You can do this:
$('#outdelete > a').click(function(){
$(this).closest('#rightoutputimgae').remove();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.