[Dom] Inerire e rimuovere elementi da pagina html

[DarioMarco]

Salve a tutti, ho un form con 5 selezioni radio, e se viene selezionata una radio mi deve apparire un campo di testo dove si può inserire un valore.
Ma vorrei che quando cambio la selezione della radio il campo di testo deve sparire e apparire sotto quello in cui ho cliccato.
Faccio un esempio per essere più chiaro:
codice html del form

 <input type="radio" name="possiedo" id="radio" value="niente - sono interessato" />
      Niente / Sono solo interessato
<input type="radio" name="possiedo" id="radio2" value="cdj" onclick="inserisci(1)" />
      Cdj <div id="par1"></div>
<input type="radio" name="possiedo" id="radio3" value="mixer" onclick="inserisci(2)" />
      Mixer <div id="par2"></div>
<input type="radio" name="possiedo" id="radio4" value="controller" onclick="inserisci(3)"/>
      Controller <div id="par3"></div> 
<input type="radio" name="possiedo" id="radio5" value="giradischi" onclick="inserisci(4)"/>
      Gradischi <div id="par4"></div> 
<input type="radio" name="possiedo" id="radio6" value="altro" onclick="inserisci(5)"/>
         Altro Indicare 
      <div id="par5"></div>

Funzione javascript che mi crea il campo di testo e lo appende subito dopo la selezione

function inserisci(n)
{
alert("successo"+n);
  if(document.getElementById && document.createTextNode)
  {
    frase = document.createTextNode("Marca/Modello");
    immagine = document.createElement("Input")
    immagine.setAttribute("type","text")
    immagine.setAttribute("name","marca")
    immagine.setAttribute("id","marca")


    document.getElementById("par"+n).appendChild(frase);
document.getElementById("par"+n).appendChild(immagine);
  }
}

Con questo codice inserisco la parte html nel div, ma non trovo un mod per eliminare un eventuale cambio di opzione, inoltre se ci clicco due volte mi riscrive nuovamente il campo di testo.
Un piccolo aiuto è sempre gradito. Grazie.

[cavicchiandrea]

function inserisci(n)
{
document.getElementById("marca").remove();
alert("successo"+n);
if(document.getElementById && document.createTextNode)
{
frase = document.createTextNode("Marca/Modello");
immagine = document.createElement("Input")
immagine.setAttribute("type","text")
immagine.setAttribute("name","marca")
immagine.setAttribute("id","marca")


document.getElementById("par"+n).appendChild(frase );
document.getElementById("par"+n).appendChild(immag ine);
}
}

[DarioMarco]

Ciao Cavicchiandrea e grazie per la tua risposta,
purtroppo ho avuto modo di provare solo adesso e mi ha restituito questo errore:
TypeError: document.getElementById(...) is null
ho provato a sostituire marca con "par" e mi ha dato lo stesso errore, poi ho messo par1 ed ha funzionato solo una volta ma senza farmi apparire nulla, solo l'alert è uscito.
Tieni presente che i radio sono 5 e i div par sono anche 5.

[cavicchiandrea]

http://webandylab.altervista.org/crearemove.php

[DarioMarco]

Grazie, davvero gentilissimo!
Solo un ultimo chiarimento: "specifica" è una variabile che funziona ad intermittenza ma non capisco il motivo.
Perdonami se approfitto della tua disponibilità.
Un saluto.

[cavicchiandrea]

E' una variabile globale* preimpostata a zero quando creo l'elemento la imposto a uno quando elimino l'oggetto la riporto a zero, questo serve per l'eliminazione dell'elemento creato e per non creare un doppione.
Senza questo accorgimento quando cerchi di eliminare con remove() l'oggetto "marca" non trovandolo va in errore




* variabile che essendo fuori da una funzione è leggibile/modificabile da qualsiasi funzione del documento

[DarioMarco]

grazie di nuovo