单击删除按钮删除图像

Question

如何通过单击相应的DELETE按钮删除具有完全除法的特定图像，下面是源代码。请帮助我。

<div class="slide"> 
   <img class="photo" src="img001.jpg"> 
   <p>image description</p> 
   <button id="del">Delete</button> 
</div> 
<div class="slide"> 
   <img src="img002.jpg"> 
   <p>image description</p> 
   <button>Delete</button> 
</div>

Answer 1

将点击事件绑定到幻灯片下方的按钮，然后单击按钮删除幻灯片。

$(function() {

  $(".slide button").click(function() {
    $(this).parent().remove();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide">
  <img class="photo" src="img001.jpg">
  <p>image description</p>
  <button id="del">Delete</button>
</div>
<div class="slide">
  <img src="img002.jpg">
  <p>image description</p>
  <button>Delete</button>
</div>

Answer 2

你需要像下面这样做： -

$('.slide button').on('click',function(){ // on click of button
  $(this).parent('.slide').remove(); // find the parent div and remove it
});

工作示例： -

$('.slide button').on('click',function(){
  $(this).parent('.slide').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide"> 
  <img class="photo" src="https://vignette.wikia.nocookie.net/siivagunner/images/9/92/Twitter_Icon.png/revision/latest?cb=20170513181034"> 
  <p>image description</p> 
  <button id="del">Delete</button>
</div> 
<div class="slide"> 
  <img src="https://bunnymedia-8962.kxcdn.com/media/catalog/product/cache/2/small_image/50x/1c9c639f71c92c9f6b86bd79f5f4d9d6/1/6/1654.7-dizzy-icon-iconbunny.jpg"> 
  <p>image description</p> 
  <button>Delete</button> 
</div>