View Full Version : JQuery - $("xx").remove(); (in form) Not working with new JQuery pack....

10-30-2008, 03:35 PM

Im having a bit of difficulty with a form. Basically i used a script to add and remove text input elements which can be found here: Mohdshaiful Form Elements. (http://mohdshaiful.wordpress.com/2007/05/31/form-elements-generation-using-jquery/)

Now this script relied on an old Jquery pack (mid 2007 release) This pack can be found here: Old JQuery (http://www.approachdesign.co.uk/foobar/jquery.js)

The use of JQuery is for this:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test jQuery</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function addFormField() {
var id = document.getElementById("id").value;
$("#divTxt").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + "&nbsp;&nbsp;<input type='text' size='20' name='txt[]' id='txt" + id + "'>&nbsp;&nbsp<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");

id = (id - 1) + 2;
document.getElementById("id").value = id;

function removeFormField(id) {


<p><a href="#" onClick="addFormField(); return false;">Add</a></p>
<form action="#" method="get" id="form1">
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>


Using the Jquery file above makes the code function as i need it to, However i have recently had to use the latest JQuery pack for another element on my form to function correctly. And since using the latest version the element above has stopped working. The element can be added okay, however it cannot be removed. I have done some simple trouble shooting and found the cause to be the new JQuery pack.

Im obviously not a professional in this area but usually i can get my head round things like this, i just havent been able to get the "ahhh thats why" moment.

Ill be eternally grateful if anyone has any solutions to this, im out of the loop regarding JQuery updates so i thought it would be best consulting you guys.

Again thank you very much in advance

Bill Posters
10-30-2008, 03:56 PM
Works for me using jquery 1.2.6.

incidentally, you need to remember to reduce the value of the hidden input field when removing fields.
Alternatively, count the necessary fields dynamically when you run the add or remove functions. That way, the number always stays correct - and the label for any newly created fields always stays relative to the actual number of fields at that time.


function addFormField() {

var id = $('#form1 p[id^="row"]').length + 1;

$("#divTxt").append('<p id="row'+id+'"><label for="txt'+id+'">Field '+id+'</label><input type="text" size="20" name="txt[]" id="txt'+id+'" /> (<a href="#" onclick="removeFormField($(this).parent());return false;">Remove</a>)<p>');


function removeFormField(el) {

$('#form1 p[id^="row"]').each(function(i){

var currentVal = $(this).find('input').val();

$(this).html('<label for="txt'+i+'">Field '+i+'</label><input type="text" size="20" name="txt[]" id="txt'+i+'" value="'+currentVal+'" /> (<a href="#" onclick="removeFormField($(this).parent());return false;">Remove</a>)');



The above script keeps remaining fields in order, keeps labels for new fields in numerical order and shuffles used fields, retaining any values which may already have been input.

10-30-2008, 04:31 PM
Works for me using jquery 1.2.6.

Thank you for such a fast reply your time is much appreciated... Being rather drained i forgot to mention that this problem only occurs in IE7. It works fine in FF and Safari.

Are you using IE7?

Oh and cheers for the heads up on the values and numbering, its part of my next plan!

Bill Posters
10-30-2008, 04:36 PM
Are you using IE7?
Nope. Mac.

Oh and cheers for the heads up on the values and numbering, its part of my next plan!
I updated my post with a new method.
See if that code works in IE7.

10-30-2008, 04:37 PM

I dont know what was causing the issue in IE but your new code has sorted the problem, I could kiss you right now. Im glad that i can move on to other tasks now, i really cant thank you enough.

Bill Posters
10-30-2008, 05:30 PM
If the problem which was occuring in IE7 was also occuring in IE6, then it's possibly down to the loose handling of id, name attribute values and the id keyword in those browsers.

It's generally worth avoiding the use of attribute names as attribute values elsewhere in the document.


<input type="hidden" id="id" value="1">