I was so sure that this question has been answered a thousand times before, but I've been unable to find an answer in StackOverflow. If there is already an answer and I was unable to find it then I apologize.

I create hidden form elements dynamically like this:

submitForm=document.getElementById('my-form');
var element=document.createElement('input');
element.id='hidden-form-data'; // or setAttribute('id','hidden-form-data');
element.name='my-hidden-form-data';
element.type='hidden';
element.value='my-data';
submitForm.appendChild(element);

This works and the input field is created and it is taken into account when submitting the form.

But I want to remove it after I have dynamically created it. I was sure that creating a new node this way would be 'correct' for browser and DOM, but apparently it is not.

This returns null:

element=document.getElementById('hidden-form-data');
if(element!=null){
    element.parentNode.removeChild(element);
}

But it never gets removed and is always null.

Is there any way I can remove a dynamically created node with an ID?

Thank you!

Please do not suggest jQuery, it's not possible to use jQuery for this, footprint is too heavy for such a small task

I could not get a working answer from here, which was the closest thread I could find.