Introducción: la tarea es anteponer un elemento de lista usando jQuery. Los elementos se pueden agregar y eliminar dinámicamente de una lista usando jQuery. Esto se puede hacer mediante el uso de controladores de eventos para escuchar los clics de los botones. Lo entenderemos con la ayuda de un ejemplo.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style: none;
margin: 1%;
}
</style>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1>List</h1>
<ul id="list">
<!-- List item with close button -->
<li> <input type="text">
<button class="close"> X</button>
</li>
</ul><br>
<!-- Button to prepend list item -->
<button class="add">+ Add item</button>
<script>
// When add button is clicked,
// list item is prepended
$(".add").click(function () {
$("#list").prepend(
'<li><input type = "text"><button class="close">X</button></li>');
});
// When close button is clicked,
// list item is removed
$(document).on("click",
"button.close", function () {
$(this).parent().remove();
});
</script>
</body>
</html>
Explicación: Aquí tenemos una lista (id = «lista») con un cuadro de texto y un botón de cierre (clase = «cerrar»). El botón se utiliza para eliminar un elemento de la lista. Al final de la lista, tenemos un botón para agregar (clase = «agregar»), usado para agregar un nuevo elemento de lista al principio.
$(".add").click(function () {
$("#list").prepend('<li>
<input type="text">
<button class="close">
X
</button></li>');
});
.click() se agrega al botón «agregar» para escuchar los clics del mouse. Cuando se hace clic en el botón, se agrega un elemento de lista con un cuadro de texto y un botón de cierre (que tiene la misma clase «cerrar») usando la función prepend(). Hemos usado la función anteponer porque queríamos agregar un elemento al principio de la lista. Para agregar un elemento al final, se usará append().
$(document).on("click", "button.close", function () {
$(this).parent().remove();
});
Aquí hemos utilizado la función on() para escuchar los clics del mouse, ya que click() no funciona con elementos generados dinámicamente. Ahora también funcionará para el botón «cerrar» recién agregado. Cuando se hace clic en el botón con la clase descendiente «cerrar», se elimina su padre (<li>, elemento de lista).
- Producción:
- lista original
-
Después de hacer clic en el botón Agregar
Después de hacer clic en agregar elemento, se antepone un nuevo elemento de lista al comienzo de la lista
Publicación traducida automáticamente
Artículo escrito por riyakalra59 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA