[Duda] JavaScript

FrUcTuS #1 Mar '17

Buenas gente estoy intentando script en el que necesito añadir y eliminar elementos de un Array. Algo como esto:

El HTML es un simple campo de texto con dos botones, Añadir y Borrar.

function add()
{
	var name = document.form.name.value;
	var encontrado = false;

for(var i=0; i<arr.length;i++)
	{
		if(arr[i]==name)
			{
				encontrado=true;
				break;
			}
	}
if(encontrado)
	{
		alert("Ya existe el elemento");
	}
else
{
	arr.push(name);
	document.getElementById('myDiv').innerHTML+="<p>Elemento: " + name + "</p>";
}
}

Eliminar elemento

function delete(){

var name = document.form.name.value;
var encontrado = false;

for(var j=0; j<arr.length;j++)
	{
		if(arr[j]==name)
			{
				var pos = j;
				encontrado=true;
				break;
			}
	}
if(encontrado)
	{
		var tamano = arr.length;
		arr.splice(pos, 1);

		if(arr.length < tamano){
			alert("Borrado con exito");
		}
	}
else
{
	alert("No se encuentra el elmento");
}
}

Cuando añado un elemento al array se escribe en el div...

document.getElementById('myDiv').innerHTML+="<p>Elemento: " + name + "</p>";

Lo que quiero conseguir es que cuando elimine un elemento del Array tambien se elimine del Div. Al igual que cuando añado se escribe en el div. Haciendo esto logicamente el contenido del Div pasa a ser "" (nada).

document.getElementById('myDiv').innerHTML="";

Mi intencion es que continue todo el contenido del div y que solo se borre el elemento que escribo en el campo de texto.

Gracias Cracks.

B

[Borrado] #2 Mar '17

#1FrUcTuS:
Mi intencion es que continue todo el contenido del div y que solo se borre el elemento que escribo en el campo de texto.

Igual soy yo, que soy muy cortito, que elemento?

document.getElementById('myDiv').innerHTML+="<p>Elemento: " + name + "</p>";

Name?

1 2 respuestas

NoRelaX #3 Mar '17

#2 Entiendo que lo que #1 quiere es que cuando se elimine un elemento del Array, "localizarlo" también dentro del contenido del <div> para zumbárselo del HTML.

Para esas cosas JQuery es tu colega https://jquery.com/

Tendrías que hacer algo como esto

jQuery("#MyDiv").find(arrayElement).html("");

1 1 respuesta

gusis93 #4 Mar '17

Re escribe el array entero en el div cada vez que borras, no creo que sean suficientes datos como para darte cuenta, o ponle algun localizador a los <p> (como el index) y busca ese nodo en myDiv y lo borras.

1 1 respuesta

FrUcTuS #5 Mar '17

#2 Si la función se ejecuta cada vez que se pulsa el botón, name es el contenido del campo texto del formulario. Que se van añadiendo a un div.

#3 Has entendido lo que quería hacer perfectamente,gracias. Al final he seguido el consejo de #4 debería de haberme pasado eso por la cabeza! :palm: :palm: :palm:

Simplemente he tenido que añadir esta linea antes. Ya que si no me eliminaba el contenido que tenia el div antes que era el titulo.

 document.getElementById('miDiv').innerHTML="<h2>Jugadores</h2>";

Nice

function delete(){

var name = document.form.name.value;
var encontrado = false;

for(var j=0; j<arr.length;j++)
    {
        if(arr[j]==name)
            {
                var pos = j;
                encontrado=true;
                break;
            }
    }
if(encontrado)
    {
        var tamano = arr.length;
        arr.splice(pos, 1);

        if(arr.length < tamano){
        alert("Borrado con exito");

        document.getElementById('miDiv').innerHTML="<h2>Jugadores</h2>";

    for(var k = 0; k < arr.length;k++){
    document.getElementById('miDiv').innerHTML+="Elemento: " + arr[k] + "<br>";
						}
        }
    }
else
{
    alert("No se encuentra el elmento");
}
}

flopi01 #6 Mar '17

Repintando el div y con forEach y filter te puedes ahorrar mucho codigo, aqui te dejo un ejemplo de lo que seria tu funcion delete con algo de jquery:

function delete() {
	var name = document.form.name.value;
    var $div = $("#miDiv");
  

arr = arr.filter((data) => data !== name)
$div.innerHtml = "";
arr.forEach((data) => $div.append("<p>" + data + "</p>"));
}

y sacando el <h2>Jugadores</h2> del div

[Duda] JavaScript

Usuarios habituales

Tags