En el siguiente artículo, agregamos y eliminamos dinámicamente elementos de la lista mediante JavaScript. Estamos utilizando JavaScript para agregar y/o eliminar elementos de la lista de forma dinámica, lo que significa que si ejecutamos nuestra página web, mostrará la opción de agregar y eliminar elementos mediante botones.
Enfoque: en la página web, se proporciona un cuadro de texto de entrada para que la entrada del usuario agregue un elemento de lista. Se proporcionan dos botones para agregar un elemento de la lista y también eliminar un elemento de la lista. Los elementos de la lista se agregan o eliminan mediante las funciones de JavaScript addItem() y removeItem(). Los elementos de la lista se crean usando el método document.createElement() y para crear un Node de texto, se usa el método document.createTextNode() y luego este Node se agrega usando el método appendChild() . El elemento de la lista se elimina mediante el método removeChild( ).
Las funciones integradas utilizadas se enumeran a continuación.
- Crear nuevos elementos: Podemos crear nuevos elementos usando la función document.createElement() . Creará elementos dinámicamente.
- Agregar elemento: Podemos agregar elementos usando la función appendchild().
- Crear Node de texto: Podemos crear un Node de texto usando el elemento document.createTextNode() . HTML consta de un Node de elemento y un Node de texto. Entonces , el método createTextNode() crea un Node de texto con el texto especificado.
- Eliminar elemento existente: podemos eliminar un elemento secundario de la lista creada utilizando la función removechild() .
Ejemplo: el siguiente código demuestra la adición y eliminación de elementos de lista mediante funciones de JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#candidate {
border-radius: 20%;
border-color: aquamarine;
box-sizing: border-box;
}
.buttonClass {
border-radius: 20%;
border-color: aqua;
border-style: inherit;
}
button:hover {
background-color: green;
}
</style>
</head>
<body>
<ul id="list"></ul>
<input type="text" id="candidate" />
<button onclick="addItem()" class="buttonClass">
Add item</button>
<button onclick="removeItem()" class="buttonClass">
Remove item</button>
<script>
function addItem() {
var a = document.getElementById("list");
var candidate = document.getElementById("candidate");
var li = document.createElement("li");
li.setAttribute('id', candidate.value);
li.appendChild(document.createTextNode(candidate.value));
a.appendChild(li);
}
// Creating a function to remove item from list
function removeItem() {
// Declaring a variable to get select element
var a = document.getElementById("list");
var candidate = document.getElementById("candidate");
var item = document.getElementById(candidate.value);
a.removeChild(item);
}
</script>
</body>
</html>
Salida: ahora, haga clic en agregar elemento para agregar cualquier elemento a la lista. Haga clic en eliminar elemento para eliminar cualquier elemento de la lista.
