3

Estoy creando un link, y lo estoy agregando con appendChild al div con id box pero cada vez que ingreso un nombre este se va acumulando ¿Cómo hago para que no se acumule si no que al ingresar un nuevo nombre se 'reinicie' la function y sólo quede el recién creado? Aclaro que esto es un ejemplo de lo que busco, ya que tengo un app creada el cual es un buscador y todo lo que encuentra lo agrega con appendChild y sería imposible por tiempo, cambiar todo el código.

var text = document.getElementById("text");
var add = document.getElementById("add");

var box = document.getElementById("box");

add.onclick = function() {

  var a = document.createElement("a");
  a.href = "#";

  a.innerText = text.value;

  box.appendChild(a);
}
<input id="text" type="text" placeholder="Pon un nombre al link...">
<button id="add">Crear Link</button>


<div id="box"></div>

2 respuestas 2

2

Podrías asegurarte de que no existe el objeto antes de crearlo:

const text = document.getElementById("text");
const add = document.getElementById("add");

const box = document.getElementById("box");
let a;

add.onclick = function() {

  if (!a) {
    a = document.createElement("a");
  }
  a.href = "#";
  a.innerText = text.value;

  //añadir un elemento que ya se ha añadido no realiza cambios
  box.appendChild(a);
}
<input id="text" type="text" placeholder="Pon un nombre al link...">
<button id="add">Crear Link</button>


<div id="box"></div>

0

Lo que te esta ocurriendo es que cada vez que le das al boton estas creando un elemento nuevo.

Lo que puedes hacer es borrar los elementos existentes antes de crear uno.

Lo más sencillo es que los crees con una id y antes que nada compruebes si existe un elemento con esa id y borrarlo.

Modificando tu código quedaría algo asi:

var text = document.getElementById("text");
var add = document.getElementById("add");

var box = document.getElementById("box");

add.onclick = function() {

  //Borramos los elementos "miLink" si existe
  if (document.contains(document.getElementById("miLink"))) {
    document.getElementById("miLink").remove();
  }

  var a = document.createElement("a");
  //Le añadimos la ID miLink 
  a.setAttribute("id", "miLink");

  a.href = "#";

  a.innerText = text.value;

  box.appendChild(a);

}
<input id="text" type="text" placeholder="Pon un nombre al link...">
<button id="add">Crear Link</button>


<div id="box"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.