How do I remove a HTML element?

[DeX]

Here's the source code from my page, I have many of these form-item elements going down the page and also a button to be able to add more next to their respective siblings. Now I need a button to remove any that are added by mistake, how can I do that?

 

Source code:

<formitem id = 'formitem20'>
<div class='form-item'>
<label for=''>Deck</label>
<select name='form1[23][DeckWidth]'>
<option value=''>W</option><option value='0'>0</option>
<option value='1'>1</option><option value='2'>2</option>
<option value='3'>3</option><option value='4'>4</option>
<option value='5'>5</option><option value='6'>6</option>
<option value='7'>7</option><option value='8'>8</option>
</select><input type='hidden' name='form1[23 value='' />
<select name='form1[23][DeckLength]'>
<option value=''>L</option><option value='0'>0</option>
<option value='1'>1</option><option value='2'>2</option>
<option value='3'>3</option><option value='4'>4</option>
<option value='5'>5</option><option value='6'>6</option>
<option value='7'>7</option><option value='8'>8</option>
</select>
<input type='hidden' name='form1[23 value='' />
<button onClick='addRow(21, "20", "Deck", 0, 1, 1, 0);return false;'>..</button>
<button onClick='takeOut('20');return false;'>X</button>
</div>
</formitem>
<br /> 

 

I already have the button there for removing the element and it goes to a Javascript function like so:

 

<script type="text/javascript">
function takeOut(id)
{
        var parent = document.getElementsByTagName('formitem')[id];
        var old = elem.removeChild(elem.childNodes[0]);
    }
</script>

 

The javascript is probably way off, I've changed it about 100 times and it never works. I have no idea how it's supposed to look, nor even how to get a hold of the proper element I need. Each element's ID increments so this one is in spot 23 of the array and is called DeckWidth. The next one would be 24 and be called DeckLength and so on. Thanks guys.

[brianlange]

jquery has a nice remove function http://api.jquery.com/remove/

Of course you will have to be using the jquery library.

[KevinM1]

formitem isn't a legit HTML element.  Why not use a div to hold these?

 

Also, what is 'elem' in your code?  Where does it come from?

 

For your function, why wouldn't:

 

function takeOut(id) {
   var parent = document.getElementById('formitem' + id);
   // etc
}

 

Work?

[DeX]

I just tried that and it almost worked. When I clicked the X it removed the element but then it submitted the form too.....you know how it does that whenever there's an error? Know what I mean?

 

I changed the code a bit, here's the function I used from you:

 

<script type="text/javascript">
function takeOut(id)
{
var parent3 = document.getElementById('formitem' + id);
        var old = parent3.removeChild(parent3.childNodes[0]);
    }
</script>

 

And here's a screenshot of the elements on the page. I couldn't post the source code because this is on one of the elements that was added with Javascript so it's not in the source. Hope I gave you enough to help me. Thanks.

 

 

 

[attachment deleted by admin]

[DeX]

This works as a function:

function takeOut(id)
{
var parent3 = document.getElementById('formitem' + id);
        var old = (parent3.parentNode).removeChild(parent3);
    }

 

, does this look okay? It does work. I also had to add a 'return false' to the button onClick event so it didn't submit the form as well.