Jquery, dynamic remove table row issue

Question

I create a dynamic add and remove table using jquery

<table>
...... // others table row here
</tr>
    <tr>
        <td></td>
        <td></td>
        <td>
            <div class="col-md-10">
                <div>
                    <table id="table1">
                        <tr>
                            <td>
                                @Html.TextBox("file", "", new { type = "file" })
                            </td>
                            <td>
                                @*<button type="button" class="delete_button" onclick="removeFiles()">Delete</button>*@
                                <a href="#" class="delete_button" onclick="removeFiles()">Delete</a>
                            </td>
                        </tr>
                    </table>
                    @*@Html.EditorFor(model => model.attachment, new { htmlAttributes = new { @class = "form-control" } })*@

                </div>
                <a href="#" onclick="addMoreFiles()">Add More</a>
            </div>

        </td>
    </tr>

// And this is my script.

<script>
   function addMoreFiles(){

       $("#table1").append('<tr><td>@Html.TextBox("file", "", new { type = "file" })</td><td><a href="#" class="delete_button" onclick="removeFiles()">Delete</a></td></tr>')
   }
function removeFiles() {
    $("#table1").on("click", ".delete_button", function (e) {
        alert("Deleted File");
        e.preventDefault();
        $(this).parents("tr").remove();
    });

}

I able to successful add the row by clicking on "Add More" action link. The result as below.

But when i click on any delete button. It will remove whole element and become like below picture. The highlighted in yellow is the part missing.

What i want is, if i click on second delete button, it will delete the second row instead of whole table.

Anyone know what is the mistake that i make? Thanks for your help

Answer 1

The issue is because you're attaching your events using the outdated on* event attributes. This means that the this reference in the functions is not what you expect it to be.

To fix this, use unobtrusive event handlers. As you've already included jQuery in the page, you can achieve that by doing this:

$(function() {
  $('.add').click(function(e) {
    e.preventDefault();
    $("#table1").append('<tr><td><input type="file" name="file" /></td><td><a href="#" class="delete_button">Delete</a></td></tr>')
  });

  $("#table1").on("click", ".delete_button", function(e) {
    e.preventDefault();
    $(this).closest("tr").remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td></td>
    <td>
      <div class="col-md-10">
        <div>
          <table id="table1">
            <tr>
              <td>
                <input type="file" name="file" />
              </td>
              <td>
                <a href="#" class="delete_button">Delete</a>
              </td>
            </tr>
          </table>
        </div>
        <a href="#" class="add">Add More</a>
      </div>
    </td>
  </tr>
</table>

Note that this makes the HTML much cleaner and more succinct. Also note that I converted the ASP controls to native HTML for the purposes of the snippet, but this can easily be changed back in your working code.