Agregar Y Eliminar Elementos de Forma Dinámica Con JQuery - Blog HostDime

Inicio
Servidores Vps
Contacto
Agregar Y Eliminar Elementos De Forma

Dinmica Con jQuery
Home Agregar Y Eliminar Elementos
Tiempo estimado de lectura 2 minutos

jQuery ha sido y sin duda seguir siendo una de las mejores libreras
de javaScript, brindando la oportunidad de hacer grandes cosas con
menos lineas de cdigo, de las que normalmente se requieren con
javaScript. Una de estas ventajas, es aadir o eliminar elementos
HTML de forma dinmica con jQuery.
Podemos hacer esto facilmente, con una pequea ayuda de mtodos
de jQuery. Estamos hablando de mtodos como append(), after() y
remove(), ya que estos son los principales mtodos utilizados para el
desarrollo de una pgina dinmica. Para ser honesto, usted no
tienes que ser un maestro de JavaScript para agregar o quitar
elementos tiles e interactivos en su pgina web de forma dinmica.
Estos elementos tambin pueden tener atributos y propiedades,

todos asignados dinmicamente durante la creacin, y al aadirlos en
la pgina web. A continuacin te mostraremos un ejemplo practico, en
el cual podrs aadir y eliminar elementos mientras pulsas los
determinado botones, e incluso eliminar todos los elementos creados
de igual forma.
El Resultado
A continuacin podrs ver el ejemplo del ejercicio, justo debajo,
puedes encontrar el cdigo usado para el ejemplo dado:
El HTML
<body>
<div id="main">
<input type="button" id="btAdd" value="Aadir 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>
El Javascript
$(document).ready(function() {
var iCnt = 0;
// Crear un elemento div aadiendo 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;
// Aadir 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 aadir 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 aadidos</b></p>' + values);

$('body').append(divValue);
El CSS
body {
font: 13px verdana;
font-weight: normal;
}
About
Latest Posts
HDCO
Latest posts by HDCO (see all)

10 Trucos para encontrar todo lo que necesitas en Google - 10 Marzo, 2017
Tips para mejorar la productividad con Google - 1 Marzo, 2017
Semana de Google apps - 27 Febrero, 2017
Comprtelo:
15Haz clic para compartir en Facebook (Se abre en una

ventana nueva)15
Haz clic para compartir en Twitter (Se abre en una ventana
nueva)
Haz clic para compartir en LinkedIn (Se abre en una ventana
nueva)
Haz clic para compartir en Pinterest (Se abre en una ventana
nueva)
Ms

javascriptjquery
Post Relacionados
Una mirada a HTML5 DataList
Tiempo estimado de lectura 2 minutosTiempo estimado de lectura 4 minutos Usted
probablemente ha experimentado
Deteccin De Dispositivos Del Lado Del Servidor Con JavaScript

Tiempo estimado de lectura 2 minutosTiempo estimado de lectura 10 minutos Durante el
ltimo par
Mozilla lanza Firefox 22 con juegos 3D, video llamadas y el uso compartido
de archivos para los desarrolladores
Tiempo estimado de lectura 2 minutosTiempo estimado de lectura 4 minutos Mozilla ha
lanzado una
Este post tiene 6 comentarios
1. paty
12 Diciembre, 2016 at 7:22 pm
hola tengo una tabla generada dinamica de la base de

datos y aadi una columna mas por cada fila para
segun los datos mostrados muestre en esa columna
un colo y valor determinado. Inicialmente el programa
calcula y realiza esta operacion para la primera fila,
pero para las otras 4 filas no realiza nada. y la
operacion de cada fila la muestra en esa unica celda.
Como puedo accesar a las celdas si no tengo
identificados esas celdas?Abria que creatElement con
jqery o algo asi? Gracias
reply to comment
2. saul
28 Septiembre, 2016 at 6:58 am
como puedo mandar esa informacion en una tabla de

postgres
reply to comment
3. angell
4 Julio, 2016 at 12:13 pm
POR QUE NO REALIZA LA ACCIN EN EL

NAVEGADOR???
APARECEN LOS BOTONES PERO NO ME DEJAN
AGREGAR LOS INPUTS A QUE SE DEBE?
reply to comment
1. Harpo
28 Julio, 2016 at 6:07 pm
Necesitas llamar el JQery a tu pagina, hazlo as:
con eso funcionar el cdigo, saludos
reply to comment
1. Jurundio
16 Noviembre, 2016 at 7:54 am
Cmo se debe de llamar el JQuery?
reply to comment
1. fernando
21 Diciembre, 2016 at 7:30 am
Tocas la puerta y dices JQuery

estas ahi?
reply to comment
Deja un comentario
1496633677257
Por Qu Usar Un Servidor VPS Para WordPress?

5 Caractersticas Para Elegir Un Proveedor De Alojamiento Web
Entradas recientes
Data center de Apple en Dinamarca, calor para las viviendas

Equinix adquiere data centers de Verizon en Bogot y Miami
Data center de HostDime en Eatonville Florida
Qu es la ley de Moore?De qu se trata?
GPU Nvidia Tesla P100
Sitios de inters
Blog Hostdime Argentina

Servidores dedicados Colombia
Vps Per
<img height="1" width="1" alt="" style="display:none"

src="https://www.facebook.com/tr?id=783908085023138&ev=Pix
elInitialized" />
Suscrbete al blog por correo electrnico
Introduce tu correo electrnico para suscribirte a este blog y recibir
notificaciones de nuevas entradas.
nete a otros 10 suscriptores
Direccin de email
subscribe http://blog.hostdim w idget blog_subscription Suscribir
Sociales
Ver perfil de hostdimecolombia en Facebook

Ver perfil de miHostDime en Twitter
Ver perfil de hostdimeco en Instagram
Ver perfil de HDColombia en Pinterest
Ver perfil de hostdime-colombia-sas en LinkedIn
Ver perfil de HostdimeColombiaCO en Google+
HostDime Blog en espaol 2016
Buscar

Agregar Y Eliminar Elementos de Forma Dinámica Con JQuery - Blog HostDime

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Agregar Y Eliminar Elementos de Forma Dinámica Con JQuery - Blog HostDime

Enviado por

Direitos autorais:

Formatos disponíveis

Inicio

Agregar Y Eliminar Elementos De Forma

Tiempo estimado de lectura 2 minutos

Estos elementos tambin pueden tener atributos y propiedades,

// Crear un elemento div aadiendo estilos CSS

// Aadir caja de texto.

var divSubmit = $(document.createElement('div'));

$('#btRemove').click(function() { // Elimina un elemento por click

$('#btRemoveAll').click(function() { // Elimina todos los elementos

// Obtiene los valores de los textbox al dar click en el boton

$(divValue).append('<p><b>Tus valores aadidos</b></p>' + values);

Latest posts by HDCO (see all)

15Haz clic para compartir en Facebook (Se abre en una

Deteccin De Dispositivos Del Lado Del Servidor Con JavaScript

hola tengo una tabla generada dinamica de la base de

como puedo mandar esa informacion en una tabla de

POR QUE NO REALIZA LA ACCIN EN EL

con eso funcionar el cdigo, saludos

Cmo se debe de llamar el JQuery?

Tocas la puerta y dices JQuery

Por Qu Usar Un Servidor VPS Para WordPress?

Data center de Apple en Dinamarca, calor para las viviendas

Blog Hostdime Argentina

<img height="1" width="1" alt="" style="display:none"

nete a otros 10 suscriptores

subscribe http://blog.hostdim w idget blog_subscription Suscribir

Ver perfil de hostdimecolombia en Facebook

HostDime Blog en espaol 2016

Você também pode gostar