ekki eins og það sé eitthvað meira mál að lesa þetta á hinni síðunni…
Hi.
I have a simple problem, I need to delete an element from a page.
I wrote a simple function to delete by ID as there is no such function built in to the DOM.
Code:
1. <html>
2. <head>
3. <title> Element test </title>
4. <script>
5. function removeElementById( id )
6. {
7. element = document.getElementById( id );
8. element.parentNode.removeChild( element );
9. }
10. </script>
11. </head>
12. <body>
13. <a href=“#” onclick=“removeElementById('gaur')”>click me</a>
14. <p id=“gaur”>Test element</p>
15. </body>
16. </html>
As you would see when you run the example above, the code works very well.
Then.
Code:
1. function MultiSelector( list_target, max ){
2.
3. // Where to write the list
4. this.list_target = list_target;
5. // How many elements?
6. this.count = 0;
7. // How many elements?
8. this.id = 0;
9. // Is there a maximum?
10. if( max ){
11. this.max = max;
12. } else {
13. this.max = -1;
14. };
15.
16. /**
17. * Add a new file input element
18. */
19. this.addElement = function( element ){
20.
21. // Make sure it's a file input element
22. if( element.tagName == ‘INPUT’ && element.type == ‘file’ ){
23.
24.
25. // Element name – what number am I?
26. element.name = ‘file_’ + this.id++;
27.
28. element.id = ‘file_’ + this.id;
29.
30. // Add reference to this object
31. element.multi_selector = this;
32.
33. // What to do when a file is selected
34. element.onchange = function(){
35.
36. // New file input
37. var new_element = document.createElement( ‘input’ );
38. new_element.type = ‘file’;
39.
40. // Add new element
41. this.parentNode.insertBefore( new_element, this );
42.
43. // Apply ‘update’ to element
44. this.multi_selector.addElement( new_element );
45.
46. // Hide this
47. this.style.display = ‘none’;
48.
49. // Update list
50. this.multi_selector.addOption( this );
51. };
52. // If we've reached maximum number, disable input element
53. if( this.max != -1 && this.count >= this.max ){
54. element.disabled = true;
55. };
56.
57. // File element counter
58. this.count++;
59. // Most recent element
60. this.current_element = element;
61.
62. } else {
63. // This can only be applied to file input elements!
64. alert( ‘Error: not a file input element’ );
65. };
66. };
67.
68. this.newSelection = function(){
69.
70. var x = document.getElementById(“filelist”);
71.
72. var img = document.getElementById(“preview”);
73.
74. var img_src = x.options[x.selectedIndex].text;
75.
76.
77.
78. img.src= ‘file://’ + img_src;
79.
80.
81.
82. }
83.
84.
85.
86. this.removeOption = function()
87.
88. {
89.
90. var x = document.getElementById(“filelist”);
91. var id = ‘file_’+x.options[x.selectedIndex].value;
92. // id = file_0
93. //document.getElementsById( id ).parentNode.removeChild( document.getElementsById( id ) );
94.
95. //alert(x.value);
96. removeElementById( id );
97.
98. x.remove(x.selectedIndex);
99.
100.
101. this.count–;
102. }
103. this.addOption = function( element )
104. {
105.
106. document.forms[0].filelist.options[document.forms[0].filelist.options.length] = new
107. Option( element.value, this.id - 2 );
108.
109. }
110.
111.
112. };
113.
114. function removeElementById( id )
115. {
116. element = document.getElementById( id );
117. element.parentNode.removeChild( element );
118. }
I'll post the html for the page here below.
Code:
1. <div id=“content”>
2. <h2>Senda inn myndir</h2>
3. <div class=“content”>
4. <form enctype=“multipart/form-data” action=“upload.php” method=“post”>
5. <select id=“filelist” size=“6” onChange=“multi_selector.newSelection()”>
6. </select>
7. <input id=“browser1” type=“file” name=“file_1” />
8.
9.
10.
11.
12.
13. <input type=“button” onclick=“multi_selector.removeOption()” value=“Remove”></input>
14. <b>Preview of selection</b>
15. <img id=“preview” style=“width: 120px;height:120px;border:2px solid black;” />
16.
17. </div>
18. <input type=“submit” name=“submit” value=“Senda allt” />
19.
20. </div>
21. <script>
22. <!– Create an instance of the multiSelector class, pass it the output target and the max number of files –>
23. var multi_selector = new MultiSelector( document.getElementById( ‘filelist’ ), 3 );
24. <!– Pass in the file element –>
25. multi_selector.addElement( document.getElementById( ‘browser1’ ) );
26. </script>
27.
28. </form>
29.
30.
31. </div>
I can't remove anything. I can virtually remove files from the list if I comment out the removeElementById( id ); from removeOptions (line 86) . But it only removes the option from the selection list.
And as you can see I'm using the same method as I did in the first example.
For those who want to know how the code above works.
When you give the browse button a file it automaticly hides the input element and creates a new one with a new name and value. At the same time it takes the value of the original file input (for example: C:\documents and settings\all users\pic.jpg) and adds it to the selection box.
There is a preview box that shows a thumbnail-sized version of the selected picture (through the file: protocol / local harddrive)
The removeOption (line 86) has to remove the selected item from the selection box, delete the right file input element and enable the current if disabled.
Now. I need some help to get this working… any ideas?
já þarna er þetta, mæli samt emð því að sækja kóðann á hina síðuna til að þú þurfir ekki að stroka út allar tölurnar ;)
Hugi notar vefkökur til að bæta notendaupplifun á vefsíðunni og greina umferð um hana.
Einnig hefur Hugi uppfært persónuverndarstefnu sína. Skoðaðu stefnuna hér..
