Creating a div container with text and a small delete icon using Javascript

My task is to create a JavaScript function that will add text along with a small delete icon next to it when a button is clicked. This text should be dynamically created using TextBox and Button controls on an ASP.NET C# page, then placed within a container such as a div element.

I want the end result to resemble the tags section on Stack Overflow, where tags are added by clicking a button.

Additionally, I need to retrieve these values after a post back in order to save them to a database once the user submits the page.
Thank you!

<script type="text/javascript"> 
function addTo(val) 
{ 
  document.getElementById('MainContent_txtbox').value = ""; 
  var lblLink = document.createElement("span"); 
  lblLink.appendChild(document.createTextNode(val));     
  document.getElementById('addItHere1').appendChild(lblLink); 
} 
</script> 

When the button is clicked, the text is displayed within a div tag.

Label Labe3 = new Label(); 
Labe3.Text = "<div id=\"addItHere" + itemCounter.ToString() + "\" ></div>"; 

Answer №1

Before anything else:

<span class="item-tag">word<span class="remove-tag" onclick="remove(this.parentNode);">X</span></span>

The subsequent action you need to do: understand how to add an onclick event to the body tag, determine the target element, check its class attribute, and compare its value with "remove-tag" etc.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Connecting to a remote MySQL database using ASP.NET

What is the best way to establish a connection between asp.net intranet pages and a remote mysql database? I have full access to both servers. Typically, I link my asp.net intranet pages to a sql server within our internal company network. Connecting to a ...

Maintaining state value during client-side navigation in NextJs with Next-Redux-Wrapper

Currently, I am working on resolving the hydration issue that occurs when using wrapper.getServerSideProps. The problem arises when I reroute with the existing setup and the store gets cleared out before adding new data. This leads to a blank page as essen ...

Issues encountered when attempting to parse a JSON object using jQuery

My PHP file is set up like this: <?php include('connection.inc.php'); ?> <?php header("Content-type: application/json"); ?> <?php $sth = mysql_query("select * from ios_appointments a join ios_worker w join ios_partners p wher ...

Go to a distant web page, complete the form, and send it in

As the creator of Gearsbook.net, a social network for Gears of War players, I am constantly striving to improve the site's functionality. Currently, it is quite basic and in need of updates. One highly requested feature by users is the ability to lin ...

Exploring the Flatmap Promise Feature in JavaScript

I'm sure this question has been asked before, but is there a way to flatten a promise in JavaScript? For example: let justAPromise: Promise<something> = aPromise.flatMap( a => getAnotherPromise()); Or like this: let promiseOfPromise: Prom ...

Creating a JavaScript functional 'class' to easily access a method both from within and outside the function

I have developed a function that manages various tasks related to paginating and sorting a table. This function includes a key method that executes the database query and updates the display table. I aim to access this inner function/method from within th ...

Fixed position is used on elements that should always remain in the exact

I have a fixed menu on my website that is working perfectly fine. I also have a container (not using Bootstrap) that should stay fixed when it reaches the static menu. Everything is functioning as expected, except when I resize the window, the container se ...

Bringing in an SVG file as a React component

When importing an SVG into React as a Component, I am facing an issue where the CSS classes are wrapped in style tags, causing an error upon import. Removing the CSS from the style tags allows the SVG to load, but it loses its additional styling. I want t ...

Do not make unnecessary calls to the server when changing the display property of an HTML object

How can I prevent a server request for the pdf file? I've experimented with using visibility=hidden and width=0. <object class='pdfClass' data='"+conventionId+"/showPdf.html' width='100%' height='600'>< ...

Will incorporating A-frame have an impact on the functionality of three.js?

I encountered an issue with my project that utilizes A-frame and three.js, resulting in the following error: Uncaught TypeError: THREE.CSS3DObject is not a constructor To reproduce the error, I used the following sample: The source code for this sampl ...

Optimizing jQuery Plugin Structure for Persistent Data

Currently, I am developing a jQuery plugin and facing some challenges with the design pattern. This pattern involves combining defaults and options, data, and namespacing techniques following jQuery's recommended practices. Below is an abstract versio ...

Utilize Jquery to transfer a JSON API Request element to an array

Currently, I am immersed in a project where I am learning how to utilize APIs and extract data from them. However, I have encountered an issue with getting a specific element from the JSONP result that I am receiving. My goal is to extract only the address ...

Can React-Select be utilized in the browser directly from the CDN?

Is it possible to utilize react-select directly in the browser without using bundlers nowadays? The most recent version that I could find which supports this is 2.1.2: How to import from React-Select CDN with React and Babel? In the past, they provided r ...

Tips for exporting an image from a threeJS scene

I am looking to export a 2D image of my scene by simply clicking a button on my HTML page. I have tried adding some code to my function, but unfortunately, it doesn't seem to work and the image is not downloading. (I am using Chrome as my browser) con ...

Tips for integrating the connect-orientdb module with the Express framework

My objective is to establish a connection between my server code, written in nodejs using the expressjs framework, and my database which is built on orientdb. Initially, I aimed to store sessions in the database but encountered difficulties when trying to ...

Expanding background images smoothly during transition with varying image dimensions

I am looking for a way to have my background-image transition smoothly, even when it has a different aspect ratio predecessor. Below is an example demonstrating this stretching effect. toggle = true jQuery(document).ready(function() { jQuery(".button ...

Continuously update the content within a paragraph using jQuery

After searching for a jQuery animation that would constantly change text within a paragraph, I stumbled upon a solution at this link : Text changing with animation jquery. However, I encountered a challenge as I wanted to include a bootstrap button beneath ...

The issue with the jQuery class change not being triggered in Internet Explorer seems to be isolated, as Chrome and

This little jQuery script I have is supposed to show a fixed navigation menu once the page has been scrolled below 200px, and then change the class on each menu list item to "current" when that section reaches the top of the viewport. The issue is that th ...

Issue with iPhone CSS displaying differently on mobile devices

The CSS design does not display correctly on iPhone devices in real-life testing, even though it appears fine on browsers with mobile view emulators. Interestingly, the design also looks great on Android phones but encounters issues specifically on iPhones ...

Error in processing large XML data: socket disconnect during express request

In my current project, I am facing the challenge of parsing a large 300MB XML file into JSON within a worker Node.js application. The workflow involves the client making a request to the main web app, which in turn sends a request to the worker server with ...