MENU

Bienvenido, Invitado
Nombre de Usuario: Contraseña: Recordarme
JavaScript es un lenguaje de programación interpretado, Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

TEMA: Añadir elementos al HTML y borrarlos con Jquery

Añadir elementos al HTML y borrarlos con Jquery 9 meses 2 semanas antes #207

  • SotoCode
  • Avatar de SotoCode
  • DESCONECTADO
  • Navegador Iniciado
  • Mensajes: 4
  • Karma: 0
¡Muy buenas a todos! Quería compartir como añadir elementos al HTML y borrarlos con Jquery.

Código HTML:
<!DOCTYPE html>
<html>
    <head>
    	<title>To Do</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<h2>To Do</h2>
		<form name="checkListForm">
			<input type="text" name="checkListItem"/>
		</form>
		<div id="button">Add!</div>
		<br/>
		<div class="list"></div>
	</body>
</html>

Código CSS:
h2 {
    font-family:arial;
}

form {
    display: inline-block;
}

#button{
    display: inline-block;
    height:20px;
	width:70px;
	background-color:#cc0000;
	font-family:arial;
	font-weight:bold;
	color:#ffffff;
	border-radius: 5px;
	text-align:center;
	margin-top:2px;
}

.list {
	font-family:garamond;
	color:#cc0000;
}

Código JQuery:
$(document).ready( function() {
    $('#button').click( function() {
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append('<div class="item">' + toAdd + '</div>');
    });
    $(document).on('click', '.item', function() {
        $(this).remove();
    });
});

El código detecta el click sobre el botón y entonces añade el contenido del input dentro del div list que tenemos creado en el HTML. Para eliminar los items que hemos creado de forma relativa utilizamos el método on().

Utilizamos cookies propias, al continuar navengando por el sitio aceptas nuestra política de cookies.

Aceptar