Remove the parent element when user clicks on the remove icon &lt;div id="form-0"&gt;
&lt;a class="remove-form-0"&gt;X&lt;/a&gt;
form 0
&lt;/div&gt;

&lt;div id="form-1"&gt;
&lt;a class="remove-form-1"&gt;X&lt;/a&gt;
form 1
&lt;/div&gt;

&lt;div id="form-2"&gt;
&lt;a class="remove-form-2"&gt;X&lt;/a&gt;
form 2
&lt;/div&gt;

&lt;div id="form-3"&gt;
&lt;a class="remove-form-3"&gt;X&lt;/a&gt;
form 3
&lt;/div&gt;


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.
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) =&gt; { 
  $(event.target).parents('.form').hide();
});