jQuery ha sido y sin duda seguirá siendo una de las mejores librerías de javaScript, brindando la oportunidad de hacer grandes cosas con menos lineas de código, de las que normalmente se requieren con javaScript. Una de estas ventajas, es añadir o eliminar elementos HTML de forma dinámica con jQuery.
Podemos hacer esto facilmente, con una pequeña ayuda de métodos de jQuery. Estamos hablando de métodos como append(), after() y remove(), ya que estos son los principales métodos utilizados para el desarrollo de una página dinámica. Para ser honesto, usted no tienes que ser un maestro de JavaScript para agregar o quitar elementos útiles e interactivos en su página web de forma dinámica.
Estos elementos también pueden tener atributos y propiedades, todos asignados dinámicamente durante la creación, y al añadirlos en la página web. A continuación te mostraremos un ejemplo practico, en el cual podrás añadir y eliminar elementos mientras pulsas los determinado botones, e incluso eliminar todos los elementos creados de igual forma.
Table of Contents
El Resultado
A continuación podrás ver el ejemplo del ejercicio, justo debajo, puedes encontrar el código usado para el ejemplo dado:
See the Pen ByOOLr by HostDime Colombia (@HostDimeColombia) on CodePen.
El HTML
[html]
<body>
<div id="main">
<input type="button" id="btAdd" value="Añadir Elemento" class="bt" />
<input type="button" id="btRemove" value="Eliminar Elemento" class="bt" />
<input type="button" id="btRemoveAll" value="Eliminar Todo" class="bt" /><br />
</div>
</body>[/html]
El Javascript
[js]
$(document).ready(function() {
var iCnt = 0;
// Crear un elemento div añadiendo estilos CSS
var container = $(document.createElement(‘div’)).css({
padding: ‘5px’, margin: ’20px’, width: ‘170px’, border: ‘1px dashed’,
borderTopColor: ‘#999’, borderBottomColor: ‘#999’,
borderLeftColor: ‘#999’, borderRightColor: ‘#999’
});
$(‘#btAdd’).click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// Añadir caja de texto.
$(container).append(‘<input type=text class="input" id=tb’ + iCnt + ‘ ‘ +
‘value="Elemento de Texto ‘ + iCnt + ‘" />’);
if (iCnt == 1) {
var divSubmit = $(document.createElement(‘div’));
$(divSubmit).append(‘<input type=button class="bt" onclick="GetTextValue()"’ +
‘id=btSubmit value=Enviar />’);
}
$(‘#main’).after(container, divSubmit);
}
else { //se establece un limite para añadir elementos, 20 es el limite
$(container).append(‘<label>Limite Alcanzado</label>’);
$(‘#btAdd’).attr(‘class’, ‘bt-disable’);
$(‘#btAdd’).attr(‘disabled’, ‘disabled’);
}
});
$(‘#btRemove’).click(function() { // Elimina un elemento por click
if (iCnt != 0) { $(‘#tb’ + iCnt).remove(); iCnt = iCnt – 1; }
if (iCnt == 0) { $(container).empty();
$(container).remove();
$(‘#btSubmit’).remove();
$(‘#btAdd’).removeAttr(‘disabled’);
$(‘#btAdd’).attr(‘class’, ‘bt’)
}
});
$(‘#btRemoveAll’).click(function() { // Elimina todos los elementos del contenedor
$(container).empty();
$(container).remove();
$(‘#btSubmit’).remove(); iCnt = 0;
$(‘#btAdd’).removeAttr(‘disabled’);
$(‘#btAdd’).attr(‘class’, ‘bt’);
});
});
// Obtiene los valores de los textbox al dar click en el boton "Enviar"
var divValue, values = »;
function GetTextValue() {
$(divValue).empty();
$(divValue).remove(); values = »;
$(‘.input’).each(function() {
divValue = $(document.createElement(‘div’)).css({
padding:’5px’, width:’200px’
});
values += this.value + ‘<br />’
});
$(divValue).append(‘<p><b>Tus valores añadidos</b></p>’ + values);
$(‘body’).append(divValue);
}[/js]
El CSS
[css]body {
font: 13px verdana;
font-weight: normal;
}[/css]
You might also like
More from Desarrolladores
Para que usar un framework en PHP, pros y contras, ventajas y desventajas, porqué emplearlos
En artículos previos del blog hemos dialogado un poco sobre los frameworks en Php; sin embargo creo que aun no …
Qué es un framework en informática o programación
Qué es un framework en informática o programación. La palabra Framework es la combinación de dos palabras, es decir, Marco …
¿Cómo aumentar la memoria PHP? ¿Porqué hacerlo?
¿Cómo aumentar la memoria PHP? ¿Porqué hacerlo? Bueno voy a empezar al revés, diciendo porqué realizarlo, cuales son las razones …
7 Comments
muy bien
Tocas la puerta y dices JQuery ¿estas ahi?