Jquery,动态删除表行问题

时间:2018-02-21 15:52:14

标签: jquery

我使用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>

//这是我的剧本。

<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();
    });

}

我能够通过点击&#34;添加更多&#34;来成功添加行。行动链接。 结果如下。 enter image description here

但是当我点击任何删除按钮时。 它将删除整个元素并变得如下图所示。 以黄色突出显示的部分缺失。 enter image description here

我想要的是,如果我点击第二个删除按钮,它将删除第二行而不是整个表。

任何人都知道我犯的错误是什么? 谢谢你的帮助

1 个答案:

答案 0 :(得分:1)

问题是因为您使用过时的on*事件属性附加了您的活动。这意味着函数中的this引用不是您期望的那样。

要解决此问题,请使用不显眼的事件处理程序。由于您已经在页面中包含了jQuery,因此您可以通过以下方式实现这一目标:

&#13;
&#13;
$(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();
  });
});
&#13;
<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>
&#13;
&#13;
&#13;

请注意,这使HTML更清晰,更简洁。另请注意,为了代码段的目的,我将ASP控件转换为原生HTML,但这可以在您的工作代码中轻松更改。