How to remove element using jQuery()

Question

I am trying to add an element when a checkbox is check and remove that same element when a user unchecks the box.

Here is my code:

$(document).ready(function() {

      var increment = 0;
      var artist_to_compare = new Set();

      $(document).on("change", ".checkbox", function() {
          increment += this.checked ? 1 : -1;

          if (!this.checked) {

              // // delete the artist from the list of comparison
              $(element_to_delete).remove();
              artist_to_compare.delete(this.name);
              var element_to_delete = "." + this.name;
              console.log(element_to_delete);

          } else {

              // Add the artist to the list of comparison
              artist_to_compare.add(this.name);
              var element_to_add = '<p class="' + this.name + '">' + this.name + '</p>';
              console.log(element_to_add);
              $(".artistToCompare").after(element_to_add);

          }

          if (increment >= 2) {
              console.log(artist_to_compare);
              // enable the compare button

          }
      });
  });

I am able to correctly add the element but I cannot remove it. Please help!

you need to restructure your code. $(element_to_delete).remove(); is declared before you define element_to_delete. just move this var element_to_delete = "." + this.name; to the top of the if statement. — karthick
– karthick, Commented Jun 29, 2017 at 4:54
$("."+this.name).remove() in place of $(element_to_delete).remove() — Prabodh M
– Prabodh M, Commented Jun 29, 2017 at 4:55

Rahul · Accepted Answer · 2017-06-29 04:57:12Z

2

You have written $(element_to_delete).remove(); before defining element_to_delete

artist_to_compare.delete(this.name);
  var element_to_delete = "." + this.name;
  console.log(element_to_delete);
$(element_to_delete).remove();

answered Jun 29, 2017 at 4:57

Rahul

2,4802 gold badges12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jtin · Accepted Answer · 2017-06-29 05:12:21Z

Yes Rahul is right. You are using remove() function to delete element_to_delete before defining it. Checkout following code.

$(document).ready(function() {

    var increment = 0;
    var artist_to_compare = new Set();

    $(document).on("change", ".checkbox", function() {
        increment += this.checked ? 1 : -1;

        if (!this.checked) {

            // delete the artist from the list of comparison
            var element_to_delete = "." + this.name;
            console.log(element_to_delete);
            $(element_to_delete).remove();
            artist_to_compare.delete(this.name);

         } else {

            // Add the artist to the list of comparison
            artist_to_compare.add(this.name);
            var element_to_add = '<p class="' + this.name + '">' + this.name + '</p>';
            console.log(element_to_add);
            $(".artistToCompare").after(element_to_add);

        }

        if (increment >= 2) {
            console.log(artist_to_compare);
            // enable the compare button

        }
    });
});

Collectives™ on Stack Overflow

How to remove element using jQuery()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related