0

I have a simple html page with file input and a fontawesome icon I'm using as a button:

<div class="col" id="fileDivs">
   <div class="block">
      <input type="file" name="files" /><i class="fas fa-plus-circle text-success" id="addFileBtn"></i><br/>
   </div>
</div>

The jquery code for adding a new button works fine

$("#addFileBtn").click(function(){
         $('.block').after("<input type='file' name='files' /><i class='fas fa-minus-circle text-warning' id='removeFileBtn'></i>")

My problem is with the delete button that does not seem to do anything. (The alert is not even triggered)

$('#removeFileBtn').click(function(){
    alert(this.id);
    $(this).parent('.block').remove();
});

Any help is much appreciated

Monty Swanson
  • 695
  • 16
  • 41
  • 1
    You need to use a delegated event handler when dealing with dynamically created elements. See the duplicate for more details. I would also strongly suggest you change `removeFileBtn` to a class, as your current logic could duplicate the `id` which is invalid and could lead to the JS logic not working as expected – Rory McCrossan Dec 20 '18 at 10:22
  • I got it to work. Thanks – Monty Swanson Dec 20 '18 at 10:45

0 Answers0