naskoo Posted January 19, 2009 Share Posted January 19, 2009 hi, I have some problems with removing elements using jquery at IE. I red an tutorials about it, check at the documentations and seems to be OK but NOT! The funny think is that when I'm using jquery-1.0.1 it works perfect, but with any of the last releases it does not. I'll be verry happy if some tells me how to figure that out. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Test jQuery</title> <script type="text/javascript" src="jquery-1.3.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 + " <input type='text' size='20' name='txt[]' id='txt" + id + "'>  <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>"); id = (id - 1) + 2; document.getElementById("id").value = id; } function removeFormField(id) { $(id).remove(); } </script> <body> <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> </form> </body> </html> Thanx in advance Nasko Quote Link to comment Share on other sites More sharing options...
rhodesa Posted January 19, 2009 Share Posted January 19, 2009 you HTML in the addFormField() function was bad. you didn't have a </label> and more imporantly, you had a <p> at the end instead of </p> $("#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(\"#row" + id + "\"); return false;'>Remove</a></p>"); Quote Link to comment Share on other sites More sharing options...
naskoo Posted January 19, 2009 Author Share Posted January 19, 2009 you HTML in the addFormField() function was bad. you didn't have a </label> and more imporantly, you had a <p> at the end instead of </p> Fixed and it's still does not work ?!? Regards Quote Link to comment Share on other sites More sharing options...
rhodesa Posted January 19, 2009 Share Posted January 19, 2009 Tested and worked for me in IE6, with jQuery 1.3 Quote Link to comment Share on other sites More sharing options...
naskoo Posted January 19, 2009 Author Share Posted January 19, 2009 SOLVED! When I added and the </label>. Shame on me . It was more then HTML then JS problem. Sorry about the stupid desturb. Why when I can not call the remove like this $("a#remove").click(function(){ $("#added").remove(); return false; }); for example. It still redirects me and do nothing. Regards Nasko Quote Link to comment Share on other sites More sharing options...
rhodesa Posted January 19, 2009 Share Posted January 19, 2009 that code doesn't make any sense. it says for every A tag with the ID of 'remove' (which there aren't any), add an onlick function. when that A node is clicked, remove any nodes with the ID of 'added' Quote Link to comment Share on other sites More sharing options...
naskoo Posted January 19, 2009 Author Share Posted January 19, 2009 Sorry I have a little bit difficulties because of my English . When you reply my about the missed tags I realized that I didn't check for loaded document. So I tried to make it this way: <script type="text/javascript" src="js/jquery-1.3.js"></script> <script type="text/javascript"> $(function(){ $("input#submit").hide(); var i=1; $("a#add").click(function(){ $(this).before('<p id="added' + i + '"><input type="file" name="file_' + i + '" id="fileupload"/>  <a href="nofile.html" id="remove">[remove]</a></p>'); if (i==1) { $("input#submit").show(); //console.log($("a#remove").parent().get(0)); } i++; return false; }); $("a#remove").click(function(){ $parent = $(this).parent().get(0); $parent.remove(); return false; }); }); </script> </head> <body> <form enctype="multipart/form-data" action="#" method="POST" id="multiForm"> <div id="content"> <strong><span id="regular_text">Select files ot upload:</span></strong><br /> <!--<input type="file" name="file_1" id="fileupload"/><br />--> <a href="index.php" id="add">[add file]</a><br /> <input type="submit" value="Upload Files" id="submit"/><br /> <input type="hidden" name="status" value="1" /> </div> </form> </body> And now I can not manage with the remove(); It still redirects me and does not executes the $parent.remove(); Any ideas? Regards Nasko Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.