3

Con este código puedo seleccionar el enlace, mostrar su valor en el INPUT TEXT y no repetirlos en el arreglo obtenido al final.

Mi duda es la siguiente:

Si yo presiono la primer vez el enlace, MUESTRA SU TEXTO EN EL INPUT TEXT. ¿Cómo puedo borrar el texto del enlace si este es seleccionado por segunda vez?

var arrDatos = new Array();

function add(x) {

  var txtInput = document.getElementById('node');
  var strValor = x.innerHTML;

  arrDatos.pushIfNotExist(strValor, function(e) {
    return e === strValor;
  });


  txtInput.value = arrDatos.toString();

}

Array.prototype.inArray = function(comparer) {
  for (var i = 0; i < this.length; i++) {
    if (comparer(this[i])) return true;
  }
  return false;
};

Array.prototype.pushIfNotExist = function(element, comparer) {
  if (!this.inArray(comparer)) {
    this.push(element);
  }
};
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input class="tf w-input" id="node" maxlength="256" placeholder="Vida nocturna, el aeropuerto " type="text" size="200">

<a class="btn desc fav w-button" id="parque1" name="parque" onclick="add(this);">PARQUE</a>

<a class="btn desc fav w-button" id="parque2" name="parque" onclick="add(this);">CENTRO COMERCIAL</a>

<a class="btn desc fav w-button" id="parque3" name="parque" onclick="add(this);">GYM</a>

1 respuesta 1

6

var arrDatos = new Array();

function add(x) {

  var txtInput = document.getElementById('node');
  var strValor = x.innerHTML;

  arrDatos.pushIfNotExist(strValor, function(e) {
    return e === strValor;
  });


  txtInput.value = arrDatos.toString();

}

Array.prototype.inArray = function(comparer) {
  for (var i = 0; i < this.length; i++) {
    if (comparer(this[i])) return true;
  }
  return false;
};

Array.prototype.pushIfNotExist = function(element, comparer) {
  if (!this.inArray(comparer)) {
    this.push(element);
  }else{
    var pos = this.indexOf(element);
    this.splice(pos,1);
}
};
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input class="tf w-input" id="node" maxlength="256" placeholder="Vida nocturna, el aeropuerto " type="text" size="200">

<a class="btn desc fav w-button" id="parque1" name="parque" onclick="add(this);">PARQUE</a>

<a class="btn desc fav w-button" id="parque2" name="parque" onclick="add(this);">CENTRO COMERCIAL</a>

<a class="btn desc fav w-button" id="parque3" name="parque" onclick="add(this);">GYM</a>

Cuando haces la comparación y preguntas si existe o no?, si este elemento ya existe en el array simplemente lo eliminas con .splice(posicion,nElementos).

nElementos especifica la cantidad de elementos a eliminar partiendo de la posicion.

Y obtienes la posicion del elemento con indexOf(element);

Array.prototype.pushIfNotExist = function(element, comparer) {
      if (!this.inArray(comparer)) {
        this.push(element);
      }else{
         var pos = this.indexOf(element);
         this.splice(pos,1);
      }
   };

mas informacion aqui

3
  • 1
    Si se pulsa varias veces una etiqueta, quedan , demás. ,,,,,,CENTRO COMERCIAL,,,,PARQUE,,,,GYM Commented el 5 oct. 2017 a las 14:52
  • 3
    ya actualice mi respuesta con el método splice puedes eliminar el elemento si conoces la posición
    – theboshy
    Commented el 5 oct. 2017 a las 14:55
  • 1
    Gracias por tu apoyo @CesarRomero, que estés bien! Commented el 5 oct. 2017 a las 15:03

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.