5

Quiero que al hacer click los elementos de #categoria no se remuevan y se agreguen en #campoBusq. Además que no inserte 2 veces div que ya se insertó.

jQuery(document).ready(function() {

    jQuery('#categoria').on('click','.elemento',function() {
      jQuery(this).appendTo('#campoBusq');
    });
    
    jQuery('#campoBusq').on('click','.elemento',function() {
      jQuery(this).appendTo('#categoria');
    });

});
 
#campoBusq {
border: 1px solid blue ;
width:45%;
float:left;
padding:5px;
height:200px;

}

#categoria {
border: 1px solid red;
width:45%;
padding:5px;
float:left;
height:200px;
}

.elemento {
border: 1px solid green;
width:90%;
margin:1%;
padding:1%;
float:left;
clear:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div id="campoBusq"></div>
  <div id="categoria">
    <div class="elemento">Chile</div>
    <div class="elemento">México</div>
    <div class="elemento">Perú</div>
    <div class="elemento">España</div>
    <div class="elemento">Argentina</div>
  </div>

7
  • ¿Cuál es la duda, error, o aclaración que buscas? Commented el 9 mar. 2017 a las 21:30
  • Quiero que los elementos de categoria no se remuevan; por ejemplo: como un boton que muestra un texto y lo oculta pero el boton nunca se remueve
    – Gamez
    Commented el 9 mar. 2017 a las 21:31
  • 1
    Edita la pregunta y aclara lo que necesitas para que no te cierren la pregunta. ;)
    – Jemonge
    Commented el 9 mar. 2017 a las 21:33
  • :-( peleo conmigo mismo por eso; que ofreces para el titulo ?
    – Gamez
    Commented el 9 mar. 2017 a las 21:36
  • Edita la pregunta y en el contenido explicas lo que quieres realizar. En este momento dice Como mantener el div de #categoria y con sólo eso es difícil para nosotros entender lo que quieres.
    – Jemonge
    Commented el 9 mar. 2017 a las 21:40

1 respuesta 1

8

Puedes clonar el elemento y después agregárselo. ¿Así es como lo necesitas?

jQuery(document).ready(function() {

    jQuery('#categoria').on('click','.elemento',function() {
       var e = $(this).clone();
       var identificador = $(this).attr("iden");
       if($("#campoBusq").find("."+identificador).length){
         alert("Ya existe");
       }else{
         jQuery(e).appendTo('#campoBusq');
       } 
   });
    
    jQuery('#campoBusq').on('click','.elemento',function() {
       jQuery(this).remove();
    });

});
 
#campoBusq {
border: 1px solid blue ;
width:45%;
float:left;
padding:5px;
height:200px;

}

#categoria {
border: 1px solid red;
width:45%;
padding:5px;
float:left;
height:200px;
}

.elemento {
border: 1px solid green;
width:90%;
margin:1%;
padding:1%;
float:left;
clear:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div id="campoBusq"></div>
  <div id="categoria">
    <div class="elemento 1" iden="1">Chile</div>
    <div class="elemento 2" iden="2">México</div>
    <div class="elemento 3" iden="3">Perú</div>
    <div class="elemento 4" iden="4">España</div>
    <div class="elemento 5" iden="5">Argentina</div>
  </div>

EDIT Hay muchas maneras de validarlo, te recomiendo que lo hagas con attributo data, pero igual como lo dejé sirve. Agregas algo como un identificador. Antes de agregar el elemento clonado obtienes ese atributo y buscas un atributo con una clase igual a ese atributo dentro de div#campoBusqueda, así comparas si existe o no.

13
  • Bien amigo solo falta una funcion para que no inserte div que ya se insertaron
    – Gamez
    Commented el 9 mar. 2017 a las 21:39
  • Me gustaria que en vez de clonar; que verifique si existe y si existe que lo remueva
    – Gamez
    Commented el 9 mar. 2017 a las 21:47
  • 3
    A sus órdenes, Jefe. Deme un min :v Commented el 9 mar. 2017 a las 21:58
  • Estoy intentando usar indexof(); aver si funciona
    – Gamez
    Commented el 9 mar. 2017 a las 22:01
  • 1
    Cuando lo tenga escribire por aqui para avisar
    – Gamez
    Commented el 9 mar. 2017 a las 22:30

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.