When adding a new div, ensure it is counted and delete it once a new div is added

When clicked, a new div is added. When clicked again, another div with the same content is created as a duplicate.

Q: Is there a way to remove the previous div when a new one is created?

$(document).on('click', '.LibSectOpen', function() {
         var LibSect = ($(this).find('.SectionName').html())
         $(this).find('.SectionName').empty()
         $(this).append('<div class="LibraryBooks BooksHolder"><img height="30" width="30" class="LibraryBooksGIF" src="../images/ic_loading.gif"></div>').load(function(e) {

        });
javascriptjqueryhtmldestroy

Answer №1

Give this a try.

HTML

<div id="box"></div>
<button>Click Me</button>

JavaScript Code

$('button').on('click', function(){
        $('#box').empty();
        $('#box').append('<div class="ContentHolder BlockBooks">this text is added dynamically</div>');

});

See Demo Here

Answer №2

Start by deleting the old div before adding the new one.

$(document).on('click', '.LibSectOpen', function() {
     var LibSect = ($(this).find('.SectionName').html());
     $(this).find('.SectionName').empty();
     $(this).find('.BooksHolder').remove();
     $(this).append('<div class="LibraryBooks BooksHolder"><img height="30" width="30" class="LibraryBooksGIF" src="../images/ic_loading.gif"></div>');
});

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

Issue with IE7: jQuery.getJSON callback not triggering

A legitimate JSON file, returned with the correct HTTP headers: Content-Type:application/json; charset= Displays properly in Chrome/FF, but IE7 is having trouble parsing it. Where should I start investigating? $.getJSON(url, null, function(data){ aler ...

jqueryajaxjsoninternet-explorer-7jsonlint

Evaluating substrings within a separate string using JavaScript

I need to compare two strings to see if one is a substring of the other. Below are the code snippets: var string1 = "www.google.com , www.yahoo.com , www.msn.com, in.news.yahoo.com"; var string2 = "in.news.yahoo.com/huffington-post-removes-sonia-gandh ...

javascript

Making AJAX requests repeatedly within a loop

My current challenge involves implementing multiple ajax requests within a loop to populate several dropdown lists. Running the requests sequentially has resulted in only the last item in the loop being populated with values. var targetcontrols = []; ...

javascriptjqueryajax

Struggling to make JavaScript read JSON data from an HTML file

I am currently working on developing a word search game using django. One of the tasks I need to accomplish is checking whether the entered word exists in a dictionary. To achieve this, I have been converting a python dictionary into JSON format with json. ...

javascriptpythonhtmljson

Make sure to refresh the model using an Ajax request in Spring MVC

I have a page where I use AJAX to insert data into my database. On that same page, I display a table of records that are inserted. Each time I add a new record, I want to update the content of the table. Here is what I have implemented: @RequestMapping(va ...

jqueryajaxjspspring-mvc

The dilemma of selecting objects in Three.js

Currently, I am developing a small web application that utilizes three.js. However, I have encountered an issue: I created a prototype with my three.js content and everything functions correctly (the canvas size in the prototype matches the browser window ...

javascripthtmlthree.js

Issue with fs.createReadStream function: it is not recognized as a valid function

I'm currently developing a project in VUE that utilizes 'fs', and I have included my code below. async Upload(file){ let fs = require('fs'); console.log(file); console.log(this.dialogImageUrl); ...

javascriptnode.jsvue.jsfs

Guide to automatically loading a default child route in Angular 1.5 using ui-router

Hello, I am looking to set a default child route to load as soon as the page loads. Below is the code snippet: $stateProvider.state('userlist', { url: '/users', component: 'users', data:{"name":"abhi"}, resolv ...

javascriptangularjsangular-ui-routerangular1.6

Check to see if the upcoming birthday falls within the next week

I'm trying to decide whether or not to display a tag for an upcoming birthday using this boolean logic, but I'm a bit confused. const birthDayDate = new Date('1997-09-20'); const now = new Date(); const today = new Date(now.getFullYear( ...

javascriptangulartypescriptdate

Error! The function worker.recognize(...).progress is throwing an error. Any ideas on how to resolve this

Here is the code snippet: //Imports const express = require('express'); const app = express(); const fs = require("fs"); const multer = require('multer'); const { createWorker } = require("tesseract.js"); co ...

javascriptpythonnode.jsexpress

Am I going too deep with nesting in JavaScript's Async/Await?

In the process of building my React App (although the specific technology is not crucial to this discussion), I have encountered a situation involving three asynchronous functions, which I will refer to as func1, func2, and func3. Here is a general outline ...

javascriptnode.jsreactjsasync-awaitnested-if

Navigating a FormData object in javascript on a .NET WebAPI version 5.2.2

I am currently working on integrating webcam video recording upload using the example provided in this RecordRTC GitHub repo. However, I have encountered a compiling error when trying to use "Request.Files" as indicated in the screenshot below. The error ...

javascriptc#asp.net-web-apiblob

Firestore is failing to accept incoming data when the setDoc method is employed

I am encountering an issue with my app's connectivity to the Firestore database when attempting to utilize setDoc. The database is successfully operational for next-auth, creating records as intended. However, the problem arises when trying to enable ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Is there a way to have a page automatically send you to a different URL depending on the information included in the link's GET statement?

I am in need of a straightforward piece of code that can automatically redirect a user to a different URL specified within the current URL: For instance: http://example.com/index.php?URL=anothersite The scenario is as follows: a user first lands on http ...

phphtmlhttp-redirect

Encountering a Module node browserify issue

I recently attempted to utilize the Dyson module node from https://github.com/webpro/dyson#installation. However, upon executing the 'dyson' command, I encountered the following error in my terminal. $ dyson Prueba/ module.js:491 throw err ...

javascriptnode.jsmodule

Making a jQuery Ajax request from a view to a controller method, but not rendering the view that is returned by that method in an MVC

Recently, I encountered an issue with an Ajax call from the Index.cshtml view to the PrintPreview method in the MasterList Controller. I made sure to pass all the necessary parameters for the call. The problem arose when returning the view from the PrintPr ...

jqueryajaxasp.net-mvc-4

Is it possible to incorporate jQuery into an AngularJS project?

When it comes to testing, AngularJS is a framework that supports test-driven development. However, jQuery does not follow this approach. Is it acceptable to use jQuery within Angular directives or anywhere in AngularJS for manipulating the DOM? This dilemm ...

javascriptangularjs

Capture all URLs containing [...slug] and generate static props only for valid addresses in Next.js

I am utilizing dynamic routes with the fallback:true option to ensure newly created pages are accepted. First, I check if the parameters are true, then I create related props and display the component with those props. In the console, I can observe that Ne ...

javascriptreactjswebnext.js

Tips on comparing a string against an object's value

I need to compare the key values of an object with the strings yes or no. I am encountering difficulties in achieving this comparison and updating radio buttons accordingly based on the comparison. Here is the code snippet: const screenJson = { Managem ...

javascriptreactjsmaterial-ui

What is the best way to process an API call entirely on the server without revealing it to the client?

Seeking guidance on a technical issue I've encountered. On my website, x.com, a form submission triggers an API call to y.com, yielding a JS hash in return. The problem arises when Adblocker Plus intercepts the content from y.com, causing it to be bl ...

javascriptjqueryruby-on-railsruby