Take the 2-minute tour ×

Here is the scenario... I have a a checkbox next to each field that I am replacing on page load with jquery with "Delete" text that enables me to delete the field via jquery, which is working fine. Like so...

$(".profile-status-box").each(function(){ $(this).replaceWith('<span class="delete">' + 'Delete' + '</span>') });

The problem comes in however is that after page load, I am also giving the user the option to dynamically add new fields. The new added fields though have the checkbox and not the delete link because they are not being replaced by jquery since they are being added after the initial page load.

Is't possible to replace the content of new elements added to the page without doing a page refresh? If not, I can always have two templates with different markup depending one for js and one for non js, but I was trying to avoind taht.

Thanks in advance.

share|improve this question

2 Answers 2

up vote 3 down vote accepted

You can use the .livequery() plugin, like this:

  $(this).replaceWith('<span class="delete">Delete</span>') 

The anonymous function is run against every element found, and each new element matching the selector as they're added.

share|improve this answer
Nice. This looks like exactly what I was looking for. I'll give it a shot. Thanks! –  James Oct 4 '10 at 23:52

Have a look at this kool demo. It removes and adds elements like a charm.


Here's how:

First of all, the (x)html is real simple. xHTML Snippet

<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>

The hidden input element simply gives you a chance to dynamically call a number you could start with. This, for instance could be set with PHP or ASP. The onclick event handler is used to call the function. Lastly, the div element is set and ready to receive some children appended unto itself (gosh that sounds wierd).

Mkay, so far so easy. Now the JS functions.

addElement JavaScript Function

function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';

And if you want to,

removeElement JavaScript Function

function removeElement(divNum) { var d = document.getElementById('myDiv'); var olddiv = document.getElementById(divNum); d.removeChild(olddiv); }

and thats that. bobs your uncle.

This is taken from this article/tutorial: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

I've just learnt this myself. thank you for the question

Hope that helps.


share|improve this answer
The OP is already using a library, in this case jQuery...so this seems very verbose :) –  Nick Craver Oct 4 '10 at 23:42

Your Answer


