Necesitarás crear los HTMLElement
de forma dinámica.
Te incluyo un ejemplo sin usar JQuery
. Tú puedes hacer la traducción, si quieres.
const inputs = [];
const field = document.querySelector(`#field`);
const container = document.querySelector(`#container`);
field.addEventListener(`keypress`, event => {
if (enterPressed(event)) {
addElement();
// In case you want to clear the input field.
field.value = ``;
}
});
const enterPressed = event => event.keyCode === 13 || event.which === 13;
const addElement = () => {
const text = field.value;
const element = createElement(text);
addRemoveButton(element);
container.appendChild(element);
// In case you want to store all inputs
inputs.push(text);
}
const createElement = text => {
const el = document.createElement(`div`);
el.innerHTML = text;
el.classList.add(`element`);
return el;
}
const removeElement = element => container.removeChild(element);
const addRemoveButton = element => {
const btn = document.createElement(`button`);
btn.classList.add(`remove-button`);
btn.addEventListener(`click`, () => removeElement(element));
btn.innerHTML = `x`;
element.appendChild(btn);
}
#field {
margin-bottom: 10px;
}
.content {
display: flex;
flex-direction: row;
}
.element {
border: 1px solid rgb(22, 197, 255);
border-radius: 5px;
background-color: lightblue;
color: rgb(39, 39, 39);
padding: 2px 5px 2px 5px;
margin-left: 10px;
}
.element:hover {
background-color: white;
}
.element .remove-button {
background: transparent;
color: rgb(22, 197, 255);
border: none;
font-size: 1.3em;
transform: scaleY(0.8)
translateX(30%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./script.js" defer></script>
<link rel="stylesheet" href="./styles.css">
<title>Test</title>
</head>
<body>
<input type="text" id="field">
<div id="container" class="content"></div>
</body>
</html>
Vamos por partes.
Para cada evento keypress
en el input
, miro si la tecla pulsada es el enter
, que tiene por código el número 13
(función enterPressed
). En ese caso, añadiré un HTMLElement
nuevo al contenedor.
No modifico directamente el texto dentro del contenedor. Mantener elementos separados ayuda a tener un control más concreto sobre cada uno de ellos, así como los estilos.
La función addElement
crea un div
, le pone como innerHTML
el texto del input
y lo añade al contenedor.
Adicionalmente, también creo un botón de forma dinámica y me suscribo al click
para poder borrar el elemento.
Opcionalmente, se añaden las clases de estilos a los elementos creados y guardo en un array en memoria todos los inputs del usuario.
Realmente, con ese array no se hace nada, ahora mismo. Des del mismo array se podría borrar también los elementos. Se me ocurre de guardar un objecto con el elemento, por ejemplo
const inputs = [];
//...
const addElement = () => {
// ...
inputs.push({
text,
element
});
}
De este modo lo podemos rescatar tanto por índixe como por el texto para luego borrarlo tanto del container
como del array.
Espero que haya ayudado.
Cualquier duda me comentas.