Jquery: .remove() with confirm button


#1

hi guys,
i have a container with a lot of div's that has the same class in it.
I want to delete only a specific div via confirm pop-up.
i have managed to delete all of the div's after i clicked confirm. i want to delete only the specific div (with class "item") that i choose.

the html:

<main class="container">
    <div class="item"><img src="img/blank.png" data-src="img2/pic-1.jpg" alt="">
               <div class="text ">
                                          <button class="deleteBtn"  onclick="deleteFunction()">delete image</button>
               </div>
     </div>

    <div class="item"><img src="img/blank.png" data-src="img2/pic-2.jpg" alt="">
               <div class="text ">
                                          <button class="deleteBtn" onclick="deleteFunction()">delete image</button>
               </div>
     </div>
</main>

javascript:

<script>
function deleteFunction(){
var x = confirm("delete this image?");
if(x==true){
$(".item").remove();
}
};
</script>

i have tried also:
$(".item", this).remove();
but it is not working.


#2

You have to select the specific image you want to remove.

I described solution to similar problem just two days ago -> https://discuss.codecademy.com/t/this-should-be-easy-please-help/54500/11

Here is your code with my corrections -> https://repl.it/CrLj/1, there are two options to choose from in the JavaScript code. Let me know if you don't understand something :slight_smile:


#3

your code works perfectly, thank you for that!

now i have a different problem. instead of the regular confirm/alert/promt boxes I use Sweetalert plugin which gives a styled box.

i can't seem to make your code work within the sweetalert plugin.
this is what i tried:

<script>
$(".deleteBtn").click(function(){

swal({
  title: "delete",
  text: "are u sure?",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "yes",
  cancelButtonText: "no",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
  $(this).parent().parent().remove();
    swal("delete", "image deleted.", "success");
  } 
});
});
</script>

when i click "yes" on the confirm box it does not delete the image but it gives the confirmation that the image was deleted.


#4

You're welcome :slight_smile:

Value of this has changed. You have to store element that you want to remove in the variable:

$(".deleteBtn").click(function() {
  var elementToRemove = $(this).parent().parent();
  swal({
      title: "delete",
      text: "are u sure?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "yes",
      cancelButtonText: "no",
      closeOnConfirm: false,
      closeOnCancel: false
    },
    function(isConfirm) {
      if (isConfirm) {
        elementToRemove.remove();
        swal("delete", "image deleted.", "success");
      }
    });
});

#5

thank you very much for the help!

I will recommend you for promotion :grin: