i write a jquery code but it doesnt work as i expected

December 5, 2022

I want when I click on add to add an elements in the .items and then when I click "remove" remove it but it doesn’t work

$('.add').on('click', function () {
      $('.items').append('<span class="rmv">remove</span>');
});
$('.rmv').on('click', function() {
       $(this).remove(); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items"></div>
<div>
   <span class="add">add</span>
</div>

>Solution :

You are trying to add an event listener to the rmv class before the elements with that class have been added to the page , you can use the $(document).on(‘click’, …) method to attach the event listener to the document instead.

$('.add').on('click', function () {
  $('.items').append('<span class="rmv">remove</span>');
});

$(document).on('click', '.rmv', function() {
   $(this).remove(); 
});