Botão remover campo

7 de fevereiro de 2013 2 respostas

Pacato 7 de fevereiro de 2013

Pessoal tudo bom?

Queria saber como faço para criar um botão que remova um campo criado dinâmicamente...

<script type="text/javascript">
function mais(id, campo) {
	var valor = "<input type='text' name='"+campo+"' value=''><br>";
	var nova = document.getElementById(id);
	var novadiv = document.createElement("div");
	var nomediv = "div";
	novadiv.innerHTML = "<input type='text' name='"+campo+"' value=''>";
	nova.appendChild(novadiv);
	}
</script>

<body> 
<center>
     <form name="form" method="GET">   
        <table border="1px" cellspacing="2" cellpadding="2">   
            <tr class="tabela">   
                   
                <td align="left">Equipamento:<input type="text" name="campo1" value=""><br><div id="aqui" align="right"></div><br>   
                <div align="center"><input type="button" value="Adicionar" onClick="mais('aqui','campo1')">
                <input type='button' value="Remover" onclick="RemoverCampos()"></div></td>   
                  
                <td align="left">Operadora:<input type="text" name="campo2" value=""><br><div id="aqui2" align="right"></div><br>   
                <div align="center"><input type="button" value="Adicionar" onClick="mais('aqui2','campo2')">
                <input type="button" value="Remover" onclick="RemoverCampos()"></div></td>
                   
                <td align="left">Status:<input type="text" name="campo3" value=""><br><div id="aqui3" align="right"></div><br>
                <div align="center"><input type="button" value="Adicionar" onClick="mais('aqui3','campo3')">
                <input type="button" value="Remover" onclick="RemoverCampos()"></div></td>   
             </tr>   
        </table>
    </form>

Adicionando está perfeito... só falta fazer remover o campo caso queira

2 Respostas

fabiozanardi 7 de fev. de 2013

Aqui deve ter exatamente o que voce precisa

http://jsfiddle.net/jaredwilli/tZPg4/4/

abraço

Pacato 8 de fev. de 2013

valeu cara… mas não estou usando JSF… nem Jquery… mas é isso que eu quero sim…

só precisava de uma luz para tentar adaptar essa lógica

Eu consegui arrumar, mas só tiro os campos dinamicos da primeira coluna que pega o ID “aqui” não sei como faço para pegar os outros…

<script type="text/javascript">
var idDiv = 0;

function mais(id, campo) {
	idDiv = idDiv + 1;

	var nova = document.getElementById(id);
	var novadiv = document.createElement("div");
	novadiv.id = 'idDiv' + idDiv;		
	novadiv.innerHTML = "<input type='button' value='X' onclick='remover(" + idDiv + ");'>"
	                    +"<input type='text' name='"+campo+"' value='text" + idDiv + "'/>";
	nova.appendChild(novadiv);
}

function remover(id) {
	var divAqui = document.getElementById('aqui');
	var divDinam = document.getElementById('idDiv' + id);
	divAqui.removeChild(divDinam);
}
</script>

<body> 
<center>
    <form name="form" method="GET">   
        <table border="1px" cellspacing="2" cellpadding="2">   
            <tr class="tabela">   
                   
                <td align="left">Equipamento: <input type="text" name="campo1" value=""><br><div id="aqui" align="right"></div><br>   
                <div align="center"><input type="button" value="Adicionar" onClick="mais('aqui','campo1')"></div></td>
                  
                <td align="left">Operadora: <input type="text" name="campo2" value=""><br><div name="a" id="aqui2" align="right"></div><br>   
                <div align="center"><input type="button" value="Adicionar" onClick="mais('aqui2','campo2')"></div></td>
                   
                <td align="left">Status: <input type="text" name="campo3" value=""><br><div id="aqui3" align="right"></div><br>
                <div align="center"><input type="button" value="Adicionar" onClick="mais('aqui3','campo3')"></div></td>   
             </tr>   
        </table>
    </form>

Criado 7 de fevereiro de 2013

Ultima resposta 8 de fev. de 2013

Respostas 2

Participantes 2

2 Respostas

Topicos relacionados