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

Issue

I was able to place a div with a custom id with the behind code, and I need to know how can I delete or add more stuff to the custom div

I’ve tried locate.InnerHTML but of course it didn’t work.

And ClientScript.RegisterStartupScript(this.GetType(), "remove", "<script>$('" + locate + "').remove();</script>"); and nothing happened.

<%@ 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>";
        }
    }
}

This button needs to delete the item placed by grabbing the custom id that was generated with it, if you guys have anything else that I could do, will be much appreciated!

Solution

Assuming this line is jquery:

ClientScript.RegisterStartupScript(this.GetType(), “remove”, “$(‘” + locate + “‘).remove();”);

You aren’t targeting the ID of the element you’re trying to remove, because you can’t just put the ID in, you have to tell jquery that it’s an ID. To target a div element by ID for removal, you’ll want something like this:

ClientScript.RegisterStartupScript(this.GetType(), “remove”, “$(‘div#” + locate + “‘).remove();”);

Jquery documentation: https://api.jquery.com/remove/, https://api.jquery.com/id-selector/

Answered By – erastl

Answer Checked By – Cary Denson (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *