如何通过自定义 html id 动态删除或添加元素？

Question

我能够使用后面的代码放置一个带有自定义 ID 的 div，我需要知道如何删除或向自定义 div 添加更多内容...

我试过了locate.InnerHTML，当然没用。

然后 ClientScript.RegisterStartupScript(this.GetType(), "remove", "<script>$('" + locate + "').remove();</script>"); 什么也没发生。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Test2.aspx.cs" Inherits="StepFollowingDemo.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <br />
    <asp:button runat="server" type="button" ID="BtnAdd" Text="Add more" class="btn btn-basic"/>
    <asp:button runat="server" type="button" ID="BtnAdd2" Text="Add Dual" class="btn btn-warning"/> <!--This button is meant to delete the last <div> placed by the id ignore the name for now-->
    <hr />
    <div runat="server" class="well container">
        <div id="TestDiv" runat="server" class="row">
            
        </div>
    </div>

    <br />
    <div class="well">
        <div class="row">
            <div class="well col-sm-1">1.</div>
        </div>
        <div class="row">
            <div class="well col-sm-1">a1.</div>
            <div class="well col-sm-1">b1.</div>
        </div>
    </div>

</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace StepFollowingDemo
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        static int counter = 1;
        string count = counter.ToString(); //Step count
        string locate = "add"+(counter - 1).ToString(); //Locate last step by id
        public void Page_Load(object sender, EventArgs e)
        {
            BtnAdd.Click += BtnAdd_Click; //Add singular step
            BtnAdd2.Click += BtnAdd2_Click; //Add a two way step
        }

        private void BtnAdd2_Click(object sender, EventArgs e)
        {
            //Response.Write("<script>alert('"+locate+"')</script>"); //Alert to know which one is the latest step
            //ClientScript.RegisterStartupScript(this.GetType(), "remove", "<script>$('" + locate + "').remove();</script>");
        }

        private void BtnAdd_Click(object sender, EventArgs e)
        {
            counter++;
            TestDiv.InnerHtml += "<div id='add"+ count +"'runat='server' class='col-sm-4'>";
            TestDiv.InnerHtml += "<h3>"+count+". </h3>";
            TestDiv.InnerHtml += "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>";
            TestDiv.InnerHtml += "</div>";
        }
    }
}

这个按钮需要删除通过抓取用它生成的自定义 id 放置的项目，如果你们有什么我可以做的，将不胜感激！

Answer 1

我会使用 asp:panel 而不是 div。

然后您可以使用受保护的字符串来写入您的 html 输出（包括您的 div）并在按钮单击事件中更改它。 StringBuilder 将有助于在代码隐藏文件中创建该输出。

根据更改和数据的复杂性，我可能会使用不同的方法，但我认为这将是一个好的开始，应该可以帮助您完成您想完成的工作。

Answer 2

假设这一行是 jquery:

ClientScript.RegisterStartupScript(this.GetType(), "remove", "$('" + locate + "').remove();");

您没有针对要删除的元素的 ID，因为您不能只输入 ID，您必须告诉 jquery 它是一个 ID。要通过 ID 定位 div 元素以进行删除，您需要这样的东西：

ClientScript.RegisterStartupScript(this.GetType(), "remove", "$('div#" + locate + "').remove();");

Jquery 文档：https://api.jquery.com/remove/, https://api.jquery.com/id-selector/

如何通过自定义 html id 动态删除或添加元素？

How to delete or add element dynamically through a custom html id?

c#

asp.net

webforms