Forum Moderators: open

Message Too Old, No Replies

removing stuff from a container via javascript

         

dmmh

9:11 am on Sep 28, 2005 (gmt 0)

10+ Year Member



I have a button on some page which lets people insert textfields and html select menu's dynamically. What I would like is a way to remove only the last one added, if the user has added one to much and decides there needs to be one field less. I can empty the container with no problems at all, but it will remove all dynamically added fields, which is not what I want

This is how the function looks now:

<script language="JavaScript" type="text/javascript">
<!--
var newGenre = "";
function genreAdd()
{
newGenre+='<select name="genre[]" size="1" class="menu">';
newGenre+='<option value="" selected>select</option>';
newGenre+='<option value="action">action</option>';
newGenre+='<option value="adventure">adventure</option>';
newGenre+='<option value="animation">animation</option>';
newGenre+='<option value="cartoon">cartoon</option>';
newGenre+='<option value="comedy">comedy</option>';
newGenre+='<option value="crime">crime</option>';
newGenre+='<option value="documentary">documentary</option>';
newGenre+='<option value="drama">drama</option>';
newGenre+='<option value="erotica">erotica</option>';
newGenre+='<option value="family">family</option>';
newGenre+='<option value="fantasy">fantasy</option>';
newGenre+='<option value="horror">horror</option>';
newGenre+='<option value="martial-arts">martial-arts</option>';
newGenre+='<option value="music">music</option>';
newGenre+='<option value="musical">musical</option>';
newGenre+='<option value="mystery">mystery</option>';
newGenre+='<option value="romance">romance</option>';
newGenre+='<option value="science-fiction">science-fiction</option>';
newGenre+='<option value="theathre">theathre</option>';
newGenre+='<option value="thriller">thriller</option>';
newGenre+='<option value="tv-series">tv-series</option>';
newGenre+='<option value="war">war</option>';
newGenre+='</select><br/>';
document.getElementById('genre_container').innerHTML = newGenre;
}
-->
</script>

basically a function like genreRemove() should remove the exact same menu, but I think there will be problems determining which one to remove to begin with, as I use html textfield arrays (name="form_field[]") to process the results on submission

javascript guru's, let the thinking begin! :D

Bernard Marx

1:15 pm on Sep 28, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm not sure I get this - sorry.

Do you want to remove the last added select element?

var genreSelects = document.getElementsByName('genre[]');
document.getElementById('genre_container').removeChild(
genreSelects[genreSelects.length-1]
);

Wouldn't it be easier to use a single select element with the

multiple
attribute?

dmmh

1:55 pm on Sep 28, 2005 (gmt 0)

10+ Year Member



in fact, that simple solution hadnt crossed my mind at all hahahahhahahah
thx for the code AND suggestion though :)