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

             var textNode = document.createTextNode('');

             cellLeft.appendChild(textNode);

             // IP1 cell //class = "wide", maxlength = "3", style = "width:28px", title = "Enter IP xxx.xxx.xxx.xxx"

             var cellIP1 = row.insertCell();

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

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

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

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

             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="" />Corp Scan

                 @*@Html.RadioButtonFor(model => model.TypeState, , new {@id="radio1",@name="rdolstState" })Use

                 @Html.RadioButtonFor(model => model.TypeState, , 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="" 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 = "", @style = "width:28px", @title = "Enter IP xxx.xxx.xxx.xxx" })

     </td>

     <td>

     <label>.</label>

     @Html.TextBoxFor(m => m.Ip2, new { @class = "wide", @maxlength = "", @style = "width:28px" })

     </td>

     <td>

     <label>.</label>

     @Html.TextBoxFor(m => m.Ip3, new { @class = "wide", @maxlength = "", @style = "width:28px" })

     </td>

     <td>

     <label>.</label>

     @Html.TextBoxFor(m => m.Ip4, new { @class = "wide", @maxlength = "", @style = "width:28px" })

     </td>

     <td>

     <label>-&nbsp</label>

     @Html.TextBoxFor(m => m.Ip5, new { @class = "wide", @maxlength = "", @style = "width: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;width: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 = "" })

     @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;width: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;width: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 = "" })

     @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的前台。。。