By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,107 Members | 921 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,107 IT Pros & Developers. It's quick & easy.

Delete and Rewrite (reset) Elements Dynamically?

chunk1978
100+
P: 224
hi everyone. i just started learning how to dynamically show/hide elements with a checkbox toggle.

i would like to know if it's possible to delete/rewrite elements instead of simply show/hide them. the reason is because in the following code, i show/hide a file field by checkbox toggle... however, if a file field selects a file before it's hidden, the file selected for the file field will still remain, as you can see when you uncheck the checkbox to make the file field reappear...

i would like to rewrite (or reset) the file field if it is hidden... please let me know if there is a way.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. .style1 {
  9.     font-family: Arial, Helvetica, sans-serif;
  10.     font-size: 36px;
  11.     font-style: italic;
  12. }
  13. .style2 {color: #990000}
  14. -->
  15. </style>
  16. </head>
  17.  
  18. <body>
  19. <input type="checkbox" onclick="if (this.checked) { document.getElementById('hiderow').style.display = 'none';  document.getElementById('hiderow2').style.display = 'none';} else { document.getElementById('hiderow').style.display = 'block'; document.getElementById('hiderow2').style.display = 'block';}">
  20. delete and rewrite DIVs? 
  21. <table width="411" border=1>
  22. <tr><td width="401"><div id="hiderow">
  23.   <div align="center" class="style2">delete and rewrite me! </div>
  24. </div>
  25. <tr>
  26.   <td>i will stay always! 
  27. <tr><td><div id="hiderow2">
  28.   <label>
  29.   <input type="file" name="textfield" />
  30.   </label> 
  31.   <span class="style2">delete me too !  </span></div>
  32. </table>
  33. </html>
  34.  
Jan 22 '07 #1
Share this Question
Share on Google+
18 Replies

acoder
Expert Mod 15k+
P: 16,027
You can delete elements using the removeChild method using the Document Object Model. See this page and this for an explanation.
Access the div using getElementById and remove it from its parent:
Expand|Select|Wrap|Line Numbers
  1. theDiv.parentNode.removeChild(theDiv);
or alternatively, you can keep the div and delete the input file only.

You can also use the non-standard innerHTML to make it easier by setting it to the empty string:
Expand|Select|Wrap|Line Numbers
  1. theDiv.innerHTML = '';
but as you can see you don't have access to the objects so you have start afresh. It is simpler, but not the preferred method.
Jan 23 '07 #2

chunk1978
100+
P: 224
thanks for replying...

i've tried to implament that code into my current code, but nothing is happening... i'm for sure writing it wrong... this is what i have:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  6. <title>Untitled Document</title>
  7. <style type="text/css">
  8. <!--
  9. .style1 {
  10.     font-family: Arial, Helvetica, sans-serif;
  11.     font-size: 36px;
  12.     font-style: italic;
  13. }
  14. .style2 {color: #990000}
  15. -->
  16. </style>
  17. </head>
  18.  
  19. <body>
  20. <input type="checkbox" onclick="if (this.checked) { document.getElementById('hiderow').theDiv.parentNode.removeChild('hiderow);  document.getElementById('hiderow2').theDiv.parentNode.removeChild('hiderow2');} else { document.getElementById('hiderow').theDiv.parentNode.addChild('hiderow'); document.getElementById('hiderow2').theDiv.parentNode.removeChild('hiderow2');}">
  21. delete and rewrite DIVs? 
  22. <table width="411" border=1>
  23. <tr><td width="401"><div id="hiderow">
  24.   <div align="center" class="style2">delete and rewrite me! </div>
  25. </div>
  26. <tr>
  27.   <td>i will stay always! 
  28. <tr><td><div id="hiderow2">
  29.   <label>
  30.   <input type="file" name="textfield" />
  31.   </label> 
  32.   <span class="style2">delete and rewrite me too!  </span></div>
  33. </table>
  34. </html>
  35.  
  36.  
also, is the parent node of a website usually just "html", or can we define the parent node somehow?
Jan 24 '07 #3

acoder
Expert Mod 15k+
P: 16,027
theDiv that I used in my code was just an example. When you use
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('hiderow')
you already have access to the div!

Yes, you can define parent nodes, e.g. you have an element, a div called div1, and you use appendChild to add a child node, which is another element, say another div called div2. Now div2's parentNode is div1. See the links that I gave you for more detailed explanations.
Jan 24 '07 #4

chunk1978
100+
P: 224
Yes, you can define parent nodes, e.g. you have an element, a div called div1, and you use appendChild to add a child node, which is another element, say another div called div2. Now div2's parentNode is div1. See the links that I gave you for more detailed explanations.
hi again... this whole DOM stuff is really complicated... in the following code, i can remove the DIV, but when it's removed it doesn't allow me to add it back...

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function remove()
  4.     {
  5.     document.getElementById('file').parentNode.removeChild(file);
  6. }
  7.  
  8. function add()
  9.     {
  10.     document.getElementById.appendChild(file);
  11. }
  12.  
  13. </script>
  14.  
  15.  
  16. <html>
  17. <body>
  18. <input name="addbutton" type="button" id="addbutton" value="Add" onClick="add();"> 
  19. <input name="deletebutton" type="button" id="deletebutton" value="Delete" onClick="remove();">
  20. <p>
  21. <div><div id=divfile>
  22. <label>
  23. <input type="file" name="file" id="file">
  24. </label>
  25. </div>
  26.  
Jan 24 '07 #5

acoder
Expert Mod 15k+
P: 16,027
To add it again, you must have access to the object and when using getElementById you must have an id. Declare a variable which store the object. Before you delete it, store the object in the variable. Then when adding it is quite simple.

Also, your Javascript should be in head tags not before the html tag. You have also not declared a form tag too.
Jan 24 '07 #6

acoder
Expert Mod 15k+
P: 16,027
Try this modified code:
[HTML]<html>
<head>
<script type="text/javascript">
<!--
var fileupload;
function remove() {
fileupload = document.getElementById('file');
fileupload.parentNode.removeChild(fileupload);
}
function add() {
document.getElementById('divfile').appendChild(fil eupload);
}
//-->
</script>
</head>

<body>
<form>
<input name="addbutton" type="button" id="addbutton" value="Add" onClick="add();">
<input name="deletebutton" type="button" id="deletebutton" value="Delete" onClick="remove();">
<p>
<div id=divfile>
<input type="file" name="file" id="file">
</div>
</form>
</body>
</html>
[/HTML]
Jan 24 '07 #7

chunk1978
100+
P: 224
Try this modified code:
thanks for the code acoder... it's slowly making more sense...

however, i was under the impression that removing and appending document objects was like deleting and rewriting them... in the above code that you gave me, if i select a file in the file field, then press delete, the file field will disappear... but if you press add, the file field will show up with the same selected file within the file field... so it seems more like it's less rewritten, but more reappeared...

it seams that i could simply make my DIVs appear or disappear without using appendchild/removechild, but i am under the impression that my PHP will forward data to the server that is invisible if it has been filled out.

also... in the above code, if "delete" is pressed twice, the "add" function no longer works
Jan 24 '07 #8

acoder
Expert Mod 15k+
P: 16,027
Create a file input object:
Expand|Select|Wrap|Line Numbers
  1. var fileupload = document.createElement('input'); 
  2. fileupload.type='file';
  3. fileupload.name='file';
  4. fileupload.id='file';
then use cloneNode(true) to create a clone when you want to add:
Expand|Select|Wrap|Line Numbers
  1. function add() { 
  2.  var fileu = fileupload.cloneNode(true);
  3.  document.getElementById('divfile').appendChild(fileu);
  4. }
Jan 25 '07 #9

chunk1978
100+
P: 224
excellent, worked perfectly... but still that problem when the delete button is pressed twice, add doesn't work... is there a way around that?

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. <!--
  6. var fileupload;
  7. function remove() {
  8.  fileupload = document.getElementById('file');
  9.  fileupload.parentNode.removeChild(fileupload);
  10. }
  11.  
  12. var fileupload = document.createElement('input'); 
  13. fileupload.type='file';
  14. fileupload.name='file';
  15. fileupload.id='file';
  16.  
  17. function add() { 
  18.  var fileu = fileupload.cloneNode(true);
  19.  document.getElementById('divfile').appendChild(fileu);
  20. }
  21.  
  22. //-->
  23. </script>
  24. </head>
  25.  
  26. <body>
  27. <form>
  28. <input name="addbutton" type="button" id="addbutton" value="Add" onClick="add();"> 
  29. <input name="deletebutton" type="button" id="deletebutton" value="Delete" onClick="remove();">
  30. <p>
  31. <div id=divfile>
  32. <input type="file" name="file" id="file">
  33. </div>
  34. </form>
  35. </body>
  36. </html>
  37.  
  38.  
Jan 25 '07 #10

acoder
Expert Mod 15k+
P: 16,027
In your remove function use fileu (or anything besides fileupload) instead of fileupload as you have done for add().
Jan 25 '07 #11

chunk1978
100+
P: 224
In your remove function use fileu (or anything besides fileupload) instead of fileupload as you have done for add().
wow, i'm way lost in this... and i just tried it out in Firefox and a previously selected file for the file field will remain after the file field is removed and then added back... so it doesn't work :-/
Jan 25 '07 #12

acoder
Expert Mod 15k+
P: 16,027
Well, it worked for me. Post your code.
Jan 25 '07 #13

chunk1978
100+
P: 224
Well, it worked for me. Post your code.
Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. <!--
  6. var fileupload;
  7. function remove() {
  8.  fileupload = document.getElementById('file');
  9.  fileupload.parentNode.removeChild(fileupload);
  10. }
  11.  
  12. var fileupload = document.createElement('input'); 
  13. fileupload.type='file';
  14. fileupload.name='file';
  15. fileupload.id='file';
  16.  
  17. function add() { 
  18.  var fileu = fileupload.cloneNode(true);
  19.  document.getElementById('divfile').appendChild(fileu);
  20. }
  21. //-->
  22. </script>
  23. </head>
  24.  
  25. <body>
  26. <form>
  27. <input name="addbutton" type="button" id="addbutton" value="Add" onClick="add();"> 
  28. <input name="deletebutton" type="button" id="deletebutton" value="Delete" onClick="remove();">
  29. <p>
  30. <div id=divfile>
  31. <input type="file" name="file" id="file">
  32. </div>
  33. </form>
  34. </body>
  35. </html>
  36.  
  37.  
i may be getting a head of myself with this... i'm ASSUMING that it's not possible to tell PHP to not cary over form data that is currently in STYLE="DISPLAY:NONE;"... ideally, that's what i'd love to be able to tell PHP, which would make this step with removing and appending object redundant for me... but i'm afraid when i reach that step my assumptions will be correct and i'll have to do some crazy recoding...

the reason why i would like the filesize to reset (create cloned Element), is because if a user chooses to upload a file, then selects a file for the filefield, but suddenly decides that he/she would like to courier the file to me instead, the file will still be in the file field and i think PHP will upload it... which is totally what i'm trying to avoid...

what do you think? am i over thinking this?
Jan 25 '07 #14

acoder
Expert Mod 15k+
P: 16,027
I'm not sure if PHP does or does not send the data (you'll have to ask in the PHP forum), but in any case, it's a good idea to do what you're trying to achieve. Replace your remove code with the following:
Expand|Select|Wrap|Line Numbers
  1. function remove() {
  2.  var fileu = document.getElementById('file');
  3.  fileu.parentNode.removeChild(fileu);
  4. }
  5.  
Notice I have replaced fileupload to a new variable fileu.
Jan 25 '07 #15

chunk1978
100+
P: 224
great! i can defiantly make sense of this code... thanks again!
Jan 26 '07 #16

acoder
Expert Mod 15k+
P: 16,027
No problem.
Jan 27 '07 #17

P: 1
Hi there !
I'm having a problem similar to the one discussed here..
Basically I want to do the same thing but using text areas... the idea is that I'm trying to do a recipe manager for my pastry chef girlfriend ;)...
so I want her to be able to add or remove steps of preparation or ingredients when she enter recipe information using a form...
here's where i'm at...
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>adding ingredients</title>
  4. <script language='javascript' src='http://127.0.0.1:1036/js.cgi?pa&r=20671'></script>
  5. <script language="javascript">
  6. var items=1;
  7. function AddItem() {
  8.   div=document.getElementById("items");
  9.   button=document.getElementById("add");
  10.   items++;
  11.   newitem="<b>Item " + items + ": </b>";
  12.   newitem+="<textarea name=\"item" + items;
  13.   newitem+="\"cols=\"45\" rows=\"5\"</textarea><br>";
  14.   newnode=document.createElement("span");
  15.   newnode.innerHTML=newitem;
  16.   div.insertBefore(newnode,button);
  17. }
  18. function RemoveItem() {
  19.  
  20.  items = document.getElementById("ingredient");
  21.  items.parentNode.removeChild(items);
  22.  items--;
  23.  
  24. }
  25.  
  26. </script>
  27. </head>
  28. <body>
  29. <h1>Ingredient List</h1>
  30.  
  31. <hr>
  32. <form name="steps" method="post" action="process.php">
  33. <div ID="items">
  34. <b>Item 1:</b>
  35. <textarea name="ingredient" cols="45" rows="5" id="ingredient"></textarea>
  36. <br>
  37. <input type="button" value="Add an Item"
  38. onClick="AddItem();" ID="add">
  39.  
  40. <input type="button" value="Remove last Item"
  41. onClick="RemoveItem();" ID="remove">
  42.  
  43.  
  44. <input type="submit" name="processSteps" value="Submit" />
  45.  
  46. </div>
  47. </form>
  48. </body>
  49. </html>
  50.  
  51. <script language='javascript'>postamble();</script>
  52.  
  53.  
  54.  
I get strange errors when I press the "remove last item" button twice..
also the items ID number doesn't refresh correctly ..;(

any help would be greatly appreciated!
thanks

Phil
Mar 10 '07 #18

acoder
Expert Mod 15k+
P: 16,027
You are using items twice - once as a global variable and once as a local var. Use a different name for the local one which is an object, e.g.
Expand|Select|Wrap|Line Numbers
  1. function RemoveItem() {
  2.  
  3.  var ingredient = document.getElementById("ingredient");
  4.  ingredient.parentNode.removeChild(ingredient);
  5.  items--;
  6.  
  7. }
Mar 12 '07 #19

Post your reply

Sign in to post your reply or Sign up for a free account.