Javascript 单击隐藏父div

我在点击时放大图像并移动它们，这样它们就不会离开页面。我在每个图片后面都有一个父div，它是黑色的图片，所以当我悬停时，我可以改变图片的不透明度，使它看起来像变暗了一样。所有这些都很好，但是，当我放大并移动照片时，会留下一个黑匣子。我需要它消失，但当我尝试它使孩子的照片消失了

下面是代码JSFIDLE

HTML

JQUERY

 $('#Gpic1').hover(function () {
 if (!$(this).find('img').hasClass('enlarged')) {
     $(this).find('img').fadeTo(500, 0.5);
 }


}, function () {
     $(this).find('img').fadeTo(500, 1);
 });

 $('#pic1').click(function () {
     $(this).fadeTo(0, 1);
 if ($(this).hasClass('enlarged')) {
     $(this).removeClass('enlarged');

     $(this).stop().animate({
         width: 187,
         height: 280
     }, 0,

     function () {
         $(this).parent().removeClass('ontop');
     });
 } else {
     $(this).addClass('enlarged')
     $(this).parent().addClass('ontop');
     $(this).stop().animate({
         width: 533,
         height: 800,
         left: +590,
         bottom: +50
     }, 200);

 }

 });

---

当您尝试删除

#Gpic1

时，所有子项都将被删除，即使它们已完全定位

如果您只是希望黑色背景消失，可以从包含的div中删除黑色背景

$("#Gpic1").css("background-color", "transparent");

或者，如果确实要删除包含div的文件，则需要将图像设置为页面上其他对象的子对象。如果使用绝对定位，则可以将图像作为身体对象的子对象而不是#Gpic1，这样就可以删除#Gpic1，并且图像不会消失

// move pic1 to be a child of the body so we can remove Gpic1
$("#pic1").appendTo(document.body);
$("#Gpic1").remove();

---

在pic onClick事件的动画结束处添加此选项

$('#Gpic1').css('background','none');

这是一把小提琴

---

$（'Gpic1'）.css（'background'，'none'）
这在放大图片时有效，但在第二次onClick事件中留下了黑色背景，该事件会将图片返回到原始大小，导致将图片悬停在上方时看起来错误。我添加了你的代码和一行代码来解决这个问题。以下是最终工作代码的修改：
// move pic1 to be a child of the body so we can remove Gpic1
$("#pic1").appendTo(document.body);
$("#Gpic1").remove();

$('#Gpic1').css('background','none');