jquery - 使用 jquery 更新表格布局

Question

我有一个部分将助教列为下拉列表，其他输入字段很少：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<%@ Import Namespace="Student.Models" %>

<div>
<table>
        <tr>
            <th>
                Teaching Assistant
            </th>
            <th>
                Course ID
            </th>
            <th>
                Day
            </th>
            <th>
                Delete Row
            </th>
        </tr>
</table>
</div>

<div>
<table id="StudentAction">
        <tr>
            <td>
                <select>
                  <option value="TA1">TA1</option>
                  <option value="TA2">TA2</option>
                  <option value="TA3">TA3</option>
                  <option value="TA4">TA4</option>
                  <option value="TA5">TA5</option>
                  <option value="TA6">TA6</option>
                </select>
            </td>
            <td>
                <select>
                  <option value="Course1">Course1</option>
                  <option value="Course2">Course2</option>
                  <option value="Course3">Course3</option>
                  <option value="Course4">Course4</option>
                  <option value="Course5">Course5</option>
                  <option value="Course6">Course6</option>
                </select>
            </td>
            <td>
                <select>
                  <option value="Monday">Monday</option>
                  <option value="Tuesday">Tuesday</option>
                  <option value="Wednesday">Wednesday</option>
                  <option value="Thursday">Thursday</option>
                  <option value="Friday">Friday</option>
                </select>
            </td>
             <td>
            <input id="delete" name="delete" type="image" src="/Content/delete.png"/>
            </td>
        </tr>

</table>
</div>

每次选择 TA、Course 和 Day 时，都会使用 jquery 插入一个新行：

    var clone = $("#StudentAction tr:first").clone();
    $("#StudentAction tr").first().after(clone);        

单击事件处理程序：

    $('input[name="delete"]').click(function () {


        $(this).remove();

    });

编辑主视图：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="Student.Models" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Test Form
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div class="StudentInfo">
<table>
<tr>
    <th>Student Id</th>
    <td><input type="text" name="StudentId" id="StudentId"/></td>
</tr>
<tr>
    <th>Student Type</th>
    <td><select name="StudentType" id="StudentType"></select></td>
</tr>
</table>

<div class="TeachingAssistant">
<% Html.RenderPartial("TeachingAssistant",(object)Model); %>
</div>

<br/><br/>

<input type="button" id="SaveStudent" name="SaveStudent" value="Save Student" />
</div>

</asp:Content>

现在，当用户单击删除图像时，我想从显示中删除该特定行。我怎样才能做到这一点？

任何帮助，将不胜感激

Answer 1

你可以试试这个：

$('#delete').click(function () {
    $(this).parent().remove();
});