jQuery添加删除元素

$(document).ready(function () {
    $('#radioExtranet').on('click', function () { showProjectInformation() });
    $('#radioCorp').on('click', function () { hideProjectInformation() });
    $('.add').on("click", function () { addServerIP(this) });
    
    $("form").submit(function () {

        //if ($("#wo").val() != "")//验证
        if (true)//验证ip1~3不为空，ComputerName不为空，Friendly name不为空，pitid&sraid 不为空
        {
            if ($("#radioExtranet").val() == "Extranet") {
                $.ajax({
                    url: "/ScanNow/RadioBtnType",
                    type: "Post",
                    //dataType: "json",
                    data: { TypeName: $("#radioExtranet").val()},
                    //success: function (data) {
                    //    if (data.wuyang == "1") {
                    //        alert(data.wuyang)
                    //        alert(data.yangwu);
                    //        //location.reload();
                    //    } else {
                    //        alert(data.yangwu);
                    //    }
                    //}
                })

            }
            else {

            }
            return true;
        }
        else {
            alert("Some fields are empty! Please fill in the item.");
            
            return false;
        }

    });
}
    );

function hideProjectInformation() {
    $("#tabProjectInformation").hide();
    $("#radioCorp").attr('value', 'Corp');
    $("#radioExtranet").attr('value', '1');

    
}
function showProjectInformation() {
    $("#tabProjectInformation").show();
    $("#radioCorp").attr('value', '0');
    $("#radioExtranet").attr('value', 'Extranet');
}

function addServerIP(el) {
    var account = $('#iptable').find("tr").length;
    var trServerIP = $("#ServerIP1").clone();
    trServerIP.attr("id", "ServerIP" + account);
    trServerIP.attr("class", "addServerIP");
    trServerIP.find(".labServerIP").remove();
    trServerIP.find("img").attr("src", "/Content/Images/Add.png");
    trServerIP.find("img").attr("title", "add");
    trServerIP.find("img").attr("alt", "add");
    trServerIP.find("img").attr("class", "add");
    
    $("#ServerIP"+(account-1)).after(trServerIP);

    $("#ServerIP" + (account - 1)).find("img").attr("src", "/Content/Images/Remove.png");
    $("#ServerIP" + (account - 1)).find(".add").attr("title", "remove");
    $("#ServerIP" + (account - 1)).find(".add").attr("alt", "remove");
    $("#ServerIP" + (account - 1)).find(".add").attr("class", "remove");
    $('.add').off("click");
    $('.add').on("click", function () { addServerIP(this) });
    $('.remove').off("click");
    $('.remove').on("click", function () { removeServerIP(this) });
    
}
function removeServerIP(el) {

    $(el).parent().parent().parent("tr").remove();

    $('.remove').off("click");
    $('.remove').on("click", function () { removeServerIP(this) });

    if ($('#iptable').find("tr").length == 2)
    {
        $("#iptable").find("tr:eq(1)").attr("id", "ServerIP1");
        $('#ServerIP1').find("td").first().append("<label class="labServerIP"><strong>Server IP</strong></label>");
    }
    $('.add').off("click");
    $('.add').on("click", function () { addServerIP(this) });

}

//
function removePorjectInformation(el) {
    var tabProjectInformationTemplate = $('#tabProjectInformationTemplate').clone();
    if ($('#tabProjectInformation').length == 0)
    { 
    tabProjectInformationTemplate.removeAttr('style');
    tabProjectInformationTemplate.attr('id','tabProjectInformation');
    }
    if (el == 'radionBtnExtranet') {
        $('#radionBtnCorp').attr('checked', false);
        $('#tabRequestInformation').after(tabProjectInformationTemplate);
    }
    else {
        $('#radionBtnExtranet').attr('checked', false);
        $('#tabProjectInformation').remove();
    }
    
    
}

jQuery添加删除元素。。。

前台代码：

@model Q6.Models.ScanRequestModel
@{
    ViewBag.Title = "Qualys Self-Serve";
}

@section HeaderContent
{
    @Styles.Render("~/Content/tip-yellow.css")
    @Scripts.Render("~/Scripts/jquery.poshytip.min.js")
    @Scripts.Render("~/Scripts/jquery-Q6-scannow.js");
    <script type="text/javascript">
        $(document).ready(function () { CreatePoshyTip('#Ip1, #Ip5, #Title, #NotificationList, #PitId, #SraId, #SdlTrackId, #EsdlId, #MsAppId, #RequestorAlias'); });
    </script>
    <!--[Yang] Start-->
    <script type="text/ecmascript">
        function addRowToTable() {
            var tbl = document.getElementById('iptable');
            var lastRow = tbl.rows.length;
            
            var iteration = lastRow;
            var row = tbl.insertRow(lastRow);
            // ServerIP cell
            var cellLeft = row.insertCell(0);
            var textNode = document.createTextNode('');
            cellLeft.appendChild(textNode);
            // IP1 cell //class = "wide", maxlength = "3", style = "28px", title = "Enter IP xxx.xxx.xxx.xxx"
            var cellIP1 = row.insertCell(1);
            var el = document.createElement('input');
            el.type = 'text';
            el.name = 'IP1' + iteration;
            el.id = 'IP1' + iteration;
            el.className = 'wide';
            el.style.width = "28px";
            el.title = 'Enter IP xxx.xxx.xxx.xxx';
            cellIP1.appendChild(el);
            // IP2 cell
            var cellIP2 = row.insertCell(2);
            var sel2 = document.createElement('lable');
            sel2.name = 'sel2' + iteration;
            sel2.textContent = '. ';
            cellIP2.appendChild(sel2);
            var el2 = document.createElement('input');
            el2.type = 'text';
            el2.name = 'IP2' + iteration;
            el2.id = 'IP2' + iteration;
            el2.className = 'wide';
            el2.style.width = "28px";
            cellIP2.insertBefore(el2, sel2.nextSibling);
            //IP3 cell
            var cellIP3 = row.insertCell(3);
            var sel3 = document.createElement('lable');
            sel3.name = 'sel3' + iteration;
            sel3.textContent = '. ';
            cellIP3.appendChild(sel3);
            var el3 = document.createElement('input');
            el3.type = 'text';
            el3.name = 'IP3' + iteration;
            el3.id = 'IP3' + iteration;
            el3.className = 'wide';
            el3.style.width = "28px";
            cellIP3.insertBefore(el3, sel3.nextSibling);
            //IP4 cell
            var cellIP4 = row.insertCell(4);
            var sel4 = document.createElement('lable');
            sel4.name = 'sel4' + iteration;
            sel4.textContent = '. ';
            cellIP4.appendChild(sel4);
            var el4 = document.createElement('input');
            el4.type = 'text';
            el4.name = 'IP4' + iteration;
            el4.id = 'IP4' + iteration;
            el4.className = 'wide';
            el4.style.width = "28px";
            cellIP4.insertBefore(el4, sel4.nextSibling);
            //IP5 cell
            var cellIP5 = row.insertCell(5);
            var sel5 = document.createElement('lable');
            sel5.name = 'sel5' + iteration;
            sel5.textContent = '- ';
            cellIP5.appendChild(sel5);
            var el5 = document.createElement('input');
            el5.type = 'text';
            el5.name = 'IP5' + iteration;
            el5.id = 'IP5' + iteration;
            el5.className = 'wide';
            el5.style.width = "28px";
            el5.title = 'Enter ending range';
            cellIP5.insertBefore(el5, sel5.nextSibling);

        }

        
        </script>
    <!--End-->
}
<h2>Create a New Scan Request</h2>
<p>@Html.ValidationMessageFor(m => m.CreatedDate)</p>
@if (!string.IsNullOrWhiteSpace(ViewBag.AddSuccess))
{
    <p class="error" style="color:Red">@ViewBag.AddSuccess</p>
}

@using (Html.BeginForm("Index", "ScanNow", FormMethod.Post))
{
    <div id="mainform">
    <h3>Scan Type</h3>
    <table id="scanTypetable" style="border-collapse:collapse; border: 0px solid black;">
        <tr>
            <td>
                <strong><label>Select Scan Type: </label></strong>
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="radioScanType" id="radioExtranet" checked="checked" value="Extranet"/>Extranet Scan
                <input type="radio" name="radioScanType" id="radioCorp" value="0" />Corp Scan
                @*@Html.RadioButtonFor(model => model.TypeState, 0, new {@id="radio1",@name="rdolstState" })Use
                @Html.RadioButtonFor(model => model.TypeState, 1, new {@id="radio2",@name="rdolstState" })Unuse*@
            </td>
        </tr>
    </table>
    <h3>Server information:</h3>
    <table id="iptable" class="iptable" style="border-collapse:collapse; border: 0px solid black;">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td colspan="2" align="center" style="font-size:10px"><strong>(range)</strong></td>
    @*[Yang] add a <td> element*@
    <td></td>
    </tr>
    <tr id="ServerIP1" class="ip">
    <td ><label class="labServerIP"><strong>Server IP</strong></label></td>
    <td>
    @Html.TextBoxFor(m => m.Ip1, new { @class = "wide", @maxlength = "3", @style = "28px", @title = "Enter IP xxx.xxx.xxx.xxx" })
    </td>
    <td>
    <label>.</label>
    @Html.TextBoxFor(m => m.Ip2, new { @class = "wide", @maxlength = "3", @style = "28px" })
    </td>
    <td>
    <label>.</label>
    @Html.TextBoxFor(m => m.Ip3, new { @class = "wide", @maxlength = "3", @style = "28px" })
    </td>
    
    <td>
    <label>.</label>
    @Html.TextBoxFor(m => m.Ip4, new { @class = "wide", @maxlength = "3", @style = "28px" })
    </td>
    <td>

    <label>-&nbsp</label>
    @Html.TextBoxFor(m => m.Ip5, new { @class = "wide", @maxlength = "3", @style = "28px", @title = "Enter ending range" })
    </td>
    @*[Yang] add a <td> element*@
    <td>
        <a href="#"><img src="~/Content/Images/Add.png" class="add" alt="add" style="vertical-align:top;margin-top:0px;22px;height:22px;" title="add" /></a>
    </td>
    
    @if (@Html.ValidationMessageFor(m => m.Ip1).ToString() != "<span class="field-validation-valid" data-valmsg-for="Ip1" data-valmsg-replace="true"></span>")
    {
    <td>@Html.ValidationMessageFor(m => m.Ip1)</td>
    }
    </tr>

    @if (@Html.ValidationMessageFor(m => m.Ip2).ToString() != "<span class="field-validation-valid" data-valmsg-for="Ip2" data-valmsg-replace="true"></span>")
    {
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td> 
    <td>@Html.ValidationMessageFor(m => m.Ip2)</td>
    </tr>
    }
    @if (@Html.ValidationMessageFor(m => m.Ip3).ToString() != "<span class="field-validation-valid" data-valmsg-for="Ip3" data-valmsg-replace="true"></span>")
    {
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>@Html.ValidationMessageFor(m => m.Ip3)</td>
    </tr>
    }
    @if (@Html.ValidationMessageFor(m => m.Ip4).ToString() != "<span class="field-validation-valid" data-valmsg-for="Ip4" data-valmsg-replace="true"></span>")
    {
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>@Html.ValidationMessageFor(m => m.Ip4)</td>
    </tr>
    }
    @if (@Html.ValidationMessageFor(m => m.Ip5).ToString() != "<span class="field-validation-valid" data-valmsg-for="Ip5" data-valmsg-replace="true"></span>")
    {
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>@Html.ValidationMessageFor(m => m.Ip5)</td>
    </tr>
    }
    </table>
    <!--[Yang] Start-->
    @*<table>
    <tr>
    <td><strong>@Html.LabelFor(m => m.ComputerName)</strong></td>
    <td>@Html.TextBoxFor(m => m.ComputerName, new { @class = "wide", @title = "Enter a Computer name for the Scan", @maxlength = "255" })
    @Html.ValidationMessageFor(m => m.ComputerName)
    </td>
    <td>
        <input type="image" src="@Url.Content("~/Content/Images/Remove.png")" alt="remove" style="vertical-align:top;margin-top:0px;22px;height:22px;" title="remove" />
    </td>
    <td>
        @Html.Hidden("hiddenTest", "hiddenTest")
        <input type="image" src="@Url.Content("~/Content/Images/CheckRight.png")" alt="valid computer name" style="vertical-align:top;margin-top:0px;22px;height:22px;" title="valid computer name" />
    </td>
    </tr>
    </table>*@
    <!--End-->
    <table>
    <tr>
    <td><strong>@Html.LabelFor(m => m.Title)</strong></td>
    <td>@Html.TextBoxFor(m => m.Title, new { @class = "wide", @title = "Enter a friendly name for the scan. No special characters are allowed in this field.", @maxlength = "255" })
    @Html.ValidationMessageFor(m => m.Title)
    </td>
    </tr>
    </table>
    </div>
    <div id="tabRequestInformation">
    <h3>Request information:</h3>
    <table>
    
    <tr>
    <td>
    <strong>@Html.LabelFor(m => m.RequestorAlias)</strong>
    </td>
    <td>
    @Html.TextBoxFor(m => m.RequestorAlias, new { @class = "wide", @disabled = "disabled" })
    @Html.ValidationMessageFor(m => m.RequestorAlias)
    </td>
    </tr>

    <tr>
    <td>
    <strong>@Html.LabelFor(m => m.NotificationList)</strong>
    </td>
    <td>
    @Html.TextBoxFor(m => m.NotificationList, new { @class = "wide", @title = "Enter Alias of people you want to notify about scan completion. Use ; to separate multiple aliases." })
    @Html.ValidationMessageFor(m => m.NotificationList)
    </td>
    </tr>

    </table>
    </div>
    
    <div id="tabProjectInformation">
    <h3>Project Information:</h3>
    <table>
    <tr>
    <td>
    <a target="_blank" href="http://eapm/">Planning IT ID</a>
    </td>
    <td>
    @Html.TextBoxFor(m => m.PitId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://eapm" })
    @Html.ValidationMessageFor(m => m.PitId)
    </td>
    </tr>

    <tr>
    <td>
    <a target="_blank" href="http://engageisrm/">SRA ID</a>
    </td>
    <td>
    @Html.TextBoxFor(m => m.SraId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://engageisrm. " })
    @Html.ValidationMessageFor(m => m.SraId)
    </td>
    </tr>

    <tr>
    <td>
    <a target="_blank" href="http://getsecure/">SDL Track ID</a>
    </td>
    <td>
    @Html.TextBoxFor(m => m.SdlTrackId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created before April 1st, 2013.See http://getsecure for instructions how to obtain." })
    @Html.ValidationMessageFor(m => m.SdlTrackId)
     </td>
    </tr>

    <tr>
    <td>
    <a target="_blank" href="http://getsecure/">eSDL ID</a> 
    </td>
    <td>
    @Html.TextBoxFor(m => m.EsdlId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created after April 1st, 2013.See http://getsecure for instructions how to obtain." })
    @Html.ValidationMessageFor(m => m.EsdlId)
      </td>
    </tr>

    <tr>
    <td>
    <a target="_blank" href="http://eapm/">MS Apps ID</a>
     </td>
    <td>
    @Html.TextBoxFor(m => m.MsAppId, new { @class = "wide", @title = "Optional for this request. MSApps has been replaced by Planning IT in 2012. An Extranet sign-off request will be denied if a Planning IT identifier has not been provided. Planning IT supports association with your MSAppsID. Obtain your Planning IT identifier and associate it to your MSAppsID from http://eapm." })
    @Html.ValidationMessageFor(m => m.MsAppId)
       </td>
    </tr>
    </table>
    </div>    
    //[Yang] Clone a Project Information
    <div id="tabProjectInformationTemplate" style="display: none">
    <h3>Project Information:</h3>
    <table>
    <tr>
    <td>
    <a target="_blank" href="http://eapm/">Planning IT ID</a>
    </td>
    <td>
    @Html.TextBoxFor(m => m.PitId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://eapm" })
    @Html.ValidationMessageFor(m => m.PitId)
    </td>
    </tr>

    <tr>
    <td>
    <a target="_blank" href="http://engageisrm/">SRA ID</a>
    </td>
    <td>
    @Html.TextBoxFor(m => m.SraId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://engageisrm. " })
    @Html.ValidationMessageFor(m => m.SraId)
    </td>
    </tr>

    <tr>
    <td>
    <a target="_blank" href="http://getsecure/">SDL Track ID</a>
    </td>
    <td>
    @Html.TextBoxFor(m => m.SdlTrackId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created before April 1st, 2013.See http://getsecure for instructions how to obtain." })
    @Html.ValidationMessageFor(m => m.SdlTrackId)
     </td>
    </tr>

    <tr>
    <td>
    <a target="_blank" href="http://getsecure/">eSDL ID</a> 
    </td>
    <td>
    @Html.TextBoxFor(m => m.EsdlId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created after April 1st, 2013.See http://getsecure for instructions how to obtain." })
    @Html.ValidationMessageFor(m => m.EsdlId)
      </td>
    </tr>

    <tr>
    <td>
    <a target="_blank" href="http://eapm/">MS Apps ID</a>
     </td>
    <td>
    @Html.TextBoxFor(m => m.MsAppId, new { @class = "wide", @title = "Optional for this request. MSApps has been replaced by Planning IT in 2012. An Extranet sign-off request will be denied if a Planning IT identifier has not been provided. Planning IT supports association with your MSAppsID. Obtain your Planning IT identifier and associate it to your MSAppsID from http://eapm." })
    @Html.ValidationMessageFor(m => m.MsAppId)
       </td>
    </tr>
    </table>
    </div>
    //Clone end

    <h3>Agreement:</h3>
    <p>
    @Html.CheckBoxFor(m => m.Agreement, new { @class = "left" })
    <strong>Read </strong>the @Html.ActionLink("Terms of Agreement", "Agreement", "Home"). By clicking here you attest agreement and compliance with these terms; that you own or have explicit permission of the owner to scan the target(s); that these targets are part of the MSIT extranet; these targets will require, at some point in the near future, either a VIP or SNAT. If your target/host does not meet these requirements, you should not submit the scan request.
    <br />
    @Html.ValidationMessageFor(m => m.Agreement)
    </p>
    
    <div class="formright" style="text-align:left">

        <input name="submitButton" id="submitButton" type="submit" value="Submit" class="button" />
    </div>
    
}

基于MVC的前台。。。