Skip to main content
mejorar el titulo y contenido de la pregunta
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70

Agregar ¿Cómo agregar y quitar elementos de un div elementos?

Como mantener el divQuiero que al hacer click los elementos de #categoria#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>

Agregar y quitar de un div elementos

Como mantener el div de #categoria

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>

¿Cómo agregar y quitar elementos de un div?

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>

Origen Enlace
Gamez
  • 554
  • 1
  • 9
  • 24

Agregar y quitar de un div elementos

Como mantener el div de #categoria

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>