dynamically add remove image field and insert to database(Remove button not working)-CodePudding

I am running the following line of codes and I can add attachments but when I try to remove it is not working. Please help :(

I tried putting alert on the remove button and it works but I cant seem to click on it to remove the upload attachments.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var html =  '<tr><td><input  type="file" name="FileToUpload[]" multiple=""></td><td><input  type="button" name="remove" id="remove" value="Remove"></td></tr>';

        var max = 10;
        var x = 1;

        $("#add").click(function(){
            if (x<max)  {
                $("#table_field").append(html);
                x  ;
            }
        });

        $("table_field").on('click','#remove',function(){
            $(this).closest('tr').remove(); 
            x--;    

        });

    });
</script>

<h3 >Upload attachments</h3>

<div >
    <table id="table_field" >
        <tr>
            <th>
                Image
            </th>
            <th>
                Action
            </th>
        </tr>
        <tr>
            <td><input  type="file" name="FileToUpload[]" multiple=""></td>
            <td><input  type="button" name="add" id="add" value="Add"></td>
        </tr>                                
    </table>
</div>

<div >
    <div  data-sitekey="6LeGWochAAAAAJJYH17JqaBlkFJfSoJPvrPr2BI0"></div>
    <span id="captcha_error" ></span>
</div>

CodePudding user response：

Two big error, the first one you miss # into $("table_field") and the most important you can't use multiple same ids in the same page, use class/data-attribute instead like:

$(document).ready(function() {
  var html = '<tr><td><input  type="file" name="FileToUpload[]" multiple=""></td><td><input  type="button" name="remove" value="Remove"></td></tr>';

  var max = 10;
  var x = 1;

  $("#add").click(function() {
    if (x < max) {
      $("#table_field").append(html);
      x  ;
    }
  });

  $("#table_field").on('click', '.remove', function() {
    $(this).closest('tr').remove();
    x--;

  });

});

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

Upload attachments
<div >
  <table id="table_field" >
    <tr>
      <th>
        Image
      </th>
      <th>
        Action
      </th>
    </tr>
    <tr>
      <td><input  type="file" name="FileToUpload[]" multiple=""></td>
      <td><input  type="button" name="add" id="add" value="Add"></td>
    </tr>
  </table>
</div>

<div >
  <div  data-sitekey="6LeGWochAAAAAJJYH17JqaBlkFJfSoJPvrPr2BI0"></div>
  <span id="captcha_error" ></span>
</div>