Фон и граница DIV не исчезают

Question

У меня проблема с функцией FadeOut. Он затемняет только содержимое, а не белый фон и границы. Я заметил, если я УДАЛИТЬ .product-div-container, который находится за пределами, в то время как я oop, он работает. Но мне нужно ЭТО DIV, чтобы поставить тень от ВСЕХ продуктов. Мне не нравится тень блока на каждом продукте в отдельности, потому что у меня есть функция постепенного появления / исчезновения в DIV продукта, когда количество изменяется. И тогда вы увидите уродливую тень коробки на вершине другого div.

Так как я могу затемнить .whole-product-div, не удаляя .product-div-container?

Спасибо за ваше время и ответ.

$(".delete-product-cart").click(function() {
  $('.whole-product-div[data-id="' + $(this).data('id') + '"]').fadeOut(1300, function() {
    $(this).remove();
  });
});

.product-div-container {
  box-shadow: 0px 0px 30px 0px grey;
}

.styling-cart {
  background: white;
  border: 1px solid grey;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='product-div-container' class='product-div-container'>
  <div class='col-md-12 styling-cart whole-product-div' data-id='1'>
    <a class='delete-product-cart' data-id='1'>Delete</a>
  </div>
</div>

Answer 1

Вот обновленный ответ, который дает то, что я считаю (ближе к) желаемому эффекту -

Цветной фон на .product-div-container - единственное необходимое изменение:

JS:

$(".delete-product-cart").click(function() {
  $('.whole-product-div[data-id="' + $(this).data('id') + '"]').fadeOut(1300, function() {
    $(this).remove();
  });
});

CSS:

.product-div-container {
  box-shadow: 0px 0px 30px 0px grey;
  min-height: 1px;
  background: yellow;
}

.styling-cart {
  background: white;
  border: 3px solid grey;
}

.styling-cart:nth-child(odd) {
  border-color: red;
}

html {background:yellow;}

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='product-div-container' class='product-div-container'>
  <div class='col-md-12 styling-cart whole-product-div' data-id='1'>
    <a class='delete-product-cart' data-id='1'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='2'>
    <a class='delete-product-cart' data-id='2'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='3'>
    <a class='delete-product-cart' data-id='3'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='4'>
    <a class='delete-product-cart' data-id='4'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='5'>
    <a class='delete-product-cart' data-id='5'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='6'>
    <a class='delete-product-cart' data-id='6'>Delete</a>
  </div>
  <div class='col-md-12 styling-cart whole-product-div' data-id='7'>
    <a class='delete-product-cart' data-id='7'>Delete</a>
  </div>
</div>

*1011* Ссылка на разветвленную скрипку: https://jsfiddle.net/26a8hd7k/

Answer 2

Это приведет к исчезновению каждого из элементов div, когда вы нажмете на кнопку delete и оставит контейнер с тенью на месте.

Вы можете использовать атрибут data кнопки для нацеливания его родитель. Я прокомментировал jQuery

$(".delete-product-cart").click(function() {
  // Here we use $(this) to reference the a tag's data attribute so it targets its parent div.
  $('.whole-product-div[data-id="' + $(this).data('id') + '"]').fadeOut(1300, function() {
    $(this).remove();
  });
});

body {
  background-color: purple !important;
}

.product-div-container {
  box-shadow: 0px 0px 30px 0px grey;
}

.styling-cart {
  background: white;
  border: 3px solid grey;
  background: yellow;
}

.styling-cart:nth-child(odd) {
  border-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id='product-div-container' class='product-div-container'>
    <div class='col-md-12 styling-cart whole-product-div' data-id='1'>
      <a class='delete-product-cart' data-id='1'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='2'>
      <a class='delete-product-cart' data-id='2'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='3'>
      <a class='delete-product-cart' data-id='3'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='4'>
      <a class='delete-product-cart' data-id='4'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='5'>
      <a class='delete-product-cart' data-id='5'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='6'>
      <a class='delete-product-cart' data-id='6'>Delete</a>
    </div>
    <div class='col-md-12 styling-cart whole-product-div' data-id='7'>
      <a class='delete-product-cart' data-id='7'>Delete</a>
    </div>
  </div>
</body>

Answer 3

Вы можете попробовать это:

  $(".delete-product-cart").click(function(){
    $('.whole-product-div[data-id="'+id+'"]')
        .removeClass('whole-product-div')
        .fadeOut(1300, function(){ 
           $(this).remove();
         });
  });

Чтобы удалить тень от коробки непосредственно перед ее затуханием