× JavaScript es un lenguaje de programación interpretado, Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Añadir elementos al HTML y borrarlos con Jquery

Más
3 años 10 meses antes #207 por SotoCode
¡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().

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Gracias a Foro Kunena

Encuentra ayuda

¿Te queda alguna duda?

Hostingato ® 2019. Marca registrada.

Uso de Cookies

Utilizamos cookies propias y de terceros para información estadística y mejorar tu navegación. Para continuar navegando debes aceptar nuestra política de cookies.

Aceptar Rechazar