Ya se pudo insertar div con jquery ahora pasamos a quitar estilos al dar click en la X y no con el contenido completo
Desde HTML
<div id="cont-categoria" class="centFRH">
<div id="categoria">
include("selectCategJquery.php");
<div class="mensCateg">Selecione las Categorias</div>
</div>
</div>
Desde selectCategJquery.php
<?php
include('../configuracion/conexion.php');
?>
<?php
$consulta = "SELECT idCategoria FROM buscar_categoria";
$resultado = $conexion->query($consulta) or die("Error de busqueda o conexion");
$contador = 0;
while ($datosCateorias=$resultado->fetch_assoc() ) {
$contador++;
$varHtml .='<div class="cont-optionElement">';
$varHtml .= "<div id='elementoBusq' class='elemento ".$contador."' iden='".$contador."' >". $datosCateorias['idCategoria']."</div>";
$varHtml .='</div>';
}
mysqli_free_result($resultado);
$conexion->close();
?>
<script> jQuery(document).ready(function() { $('#categoria').on('click','.elemento',function() { var e = $(this).clone(); var identificador = $(this).attr("iden"); var div = $('<div/>', { 'class' : 'xClones', 'html' : '<span>X</span>' }); if($("#campoBusq").find("."+identificador).length){ $("#campoBusq").find("."+identificador).remove(''); $(this).parent(".cont-optionElement").removeClass("estilSelectCateg"); }else{ $(e).appendTo('#campoBusq'); $(e).append(div); $(this).parent(".cont-optionElement").addClass("estilSelectCateg"); } }); $('#campoBusq').on('click','.elemento',function() { $(this).remove(); }); // $('#campoBusq').on('click','.elemento',function() { // $(this).parent(".cont-optionElement").removeClass("estilSelectCateg"); // }); }); </script>
Estilos CSS
.xClones{
top: 3px;
cursor: pointer;
line-height: 25px;
position: relative;
border-radius: 50%;
text-align: center;
margin: 0px 15px 0px 3px;
width: 25px;height: 25px;
box-shadow: 1px 1px 7px hsla(12, 10%, 66%,1)inset;
}
Son Dos detalles 1: Eliminar y 2: Quitar Estilos
1:Eliminar de #campoBusq solo al dar en la X
2:Quitar estilos de seleccin de Caterias al dar click en la X
Como vez el paso 2 se visualiza en la imagen, donde ?; justo en el estilo que de backround que no se removio al quitar el elemento de #campoBusq
Este es el Paso 1 que falta