Remove the parent element when user clicks on the remove icon

Question

<div id="form-0">
<a class="remove-form-0">X</a>
form 0
</div>

<div id="form-1">
<a class="remove-form-1">X</a>
form 1
</div>

<div id="form-2">
<a class="remove-form-2">X</a>
form 2
</div>

<div id="form-3">
<a class="remove-form-3">X</a>
form 3
</div>

I would like to hide the parent div, when it clicks on the remove element.

   $(".remove-form-0").on("click", function(){
          $("#form-0").css("display", "none");
  });

I do not want to duplicate this for 4 times. What is the best solution for this ?

Any helps would be highly appreciated.

Answer 1

In general classes are used for collections of things that should exhibit the same behaviour. Your buttons here are perfect candidates for this, so you should give them the same class name - remove-form-btn

Then give your divs a class name of form and you can write just one handler:

$('.remove-form-btn').click((event) => { 
  $(event.target).parents('.form').hide();
});

Answer 2

Without touching your HTML markup... The use of attribute selector would help achieve this.

$("[class^='remove-form-']").on("click", function() {
  $(this).parents("[id^='form']").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="form-0">
  <a class="remove-form-0">X</a> form 0
</div>

<div id="form-1">
  <a class="remove-form-1">X</a> form 1
</div>

<div id="form-2">
  <a class="remove-form-2">X</a> form 2
</div>

<div id="form-3">
  <a class="remove-form-3">X</a> form 3
</div>

---

Alternative:

Instead of having a different class for each remove icon, I would use a single class... And same for the forms.

It is exactly the same result... But the way to lookup elements is different... And makes the code a bit more readable.

Notice that I left the original class/id there... In case it's already used elsewhere. The fun with classes is you can have many.

That would be:

$(".remove").on("click", function() {
  $(this).parents(".form").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="form-0" class="form">
  <a class="remove-form-0 remove">X</a> form 0
</div>

<div id="form-1" class="form">
  <a class="remove-form-1 remove">X</a> form 1
</div>

<div id="form-2" class="form">
  <a class="remove-form-2 remove">X</a> form 2
</div>

<div id="form-3" class="form">
  <a class="remove-form-3 remove">X</a> form 3
</div>

---

In both cases

Depending on your structure... To traverse the DOM elements from $(this), you may prefer to use .closest(), .parent or parents. Your choice.

Answer 3

If you want to treat a bunch of elements all in the same way, then you should make a class for them, all with the same name.

$("a.remove-form").bind("click", function(e) {
    $(e.target).closest(".form").css("display", "none");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form">
  <a class="remove-form">X</a>
  form 0
</div>

<div class="form">
  <a class="remove-form">X</a>
  form 1
</div>

<div class="form">
  <a class="remove-form">X</a>
  form 2
</div>

<div class="form">
  <a class="remove-form">X</a>
  form 3
</div>