En este tutorial crearemos un campo de texto para Eliminar dinámicamente usando JavaScript. Este código eliminará dinámicamente el campo de entrada cuando el usuario haga clic en el botón Eliminar. El código usa onclick () para llamar a una función que elimina un campo de entrada aplicando una posición de índice de matriz como parámetro en removeInputField (). Puede aplicar este script a su código para acelerar su transacción, es un programa fácil de usar, no dude en modificarlo.
Usaremos JavaScript para agregar alguna característica nueva a la interfaz del sitio web al escribirla realmente en una página HTML. Es lo que le da a su página diferentes elementos interactivos y animaciones que atraen al usuario.
Empezando:
Este es el enlace para la rutina de carga que utilicé para el diseño del diseño https://getbootstrap.com/.
La interfaz principal:
Este código contiene la interfaz de la aplicación. Para crear esto, simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Eliminar Campo de Texto Dinámicamente en Javascript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-3"></div>
<div class="col-md-6">
<form >
<h3>Campos de Texto</h3>
<div class="form-inline" id="input-1">
<input type="text" class="form-control" placeholder="Ingrese Texto" name="form[]"><button class="btn btn-danger" onclick="removeInputField(1);">Eliminar</button>
<br /><br />
</div>
<div class="form-inline" id="input-2">
<input type="text" class="form-control" placeholder="Ingrese Texto" name="form[]"><button class="btn btn-danger" onclick="removeInputField(2);">Eliminar</button>
<br /><br />
</div>
<div class="form-inline" id="input-3">
<input type="text" class="form-control" placeholder="Ingrese Texto" name="form[]"><button class="btn btn-danger" onclick="removeInputField(3);">Eliminar</button>
<br /><br />
</div>
<div class="form-inline" id="input-4">
<input type="text" class="form-control" placeholder="Ingrese Texto" name="form[]"><button class="btn btn-danger" onclick="removeInputField(4);">Eliminar</button>
<br /><br />
</div>
<div class="form-inline" id="input-5">
<input type="text" class="form-control" placeholder="Ingrese Texto" name="form[]"><button class="btn btn-danger" onclick="removeInputField(5);">Eliminar</button>
<br /><br />
</div>
</form>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Crear el script:
Este código contiene el script de la aplicación. Este código eliminará un campo de entrada cuando se haga clic en el botón. Para hacer esto, simplemente copie y escriba este bloque de códigos como se muestra a continuación dentro del editor de texto y guárdelo como script.js dentro del directorio js
var counter=5;
function removeInputField(id){
var inputId = "input-"+id;
var input = document.getElementById(inputId);
input.parentNode.removeChild(input);
counter--;
if(counter==0){
window.location="index.html";
}
}
Ahí lo tienes, creamos un campo de texto para Eliminar dinámicamente usando JavaScript. Espero que este sencillo tutorial te ayude a lo que estás buscando.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
