Único detalle: Cómo quito estilo desde los elementos clonados en #campoBusq a su elemento proveniente? que esta en:
#cateoria>.cont-optionElement>.elemento ".$contador.
¿que métodos podría tomar para este problema?
Usuario Plantilla.php
<div id="campoBusq"></div>
<div id="cont-categoria" class="centFRH">
<div id="categoria">';
include("selectCategJquery.php");
<div class="mensCateg">Selecione las Categorias</div>
</div>
</div>
selectCategJquery.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");
$.ajax({url:'selectCategJquery.php',method:'post',data:{"identificador":identificador}});
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).append(div);
$(e).appendTo('#campoBusq');
$(this).parent(".cont-optionElement").addClass("estilSelectCateg");
}
});
$('#campoBusq').on('click','.xClones',function() {
$(this).parent().remove();
$( $(".cont-optionElement")[0]).removeClass("estilSelectCateg");
// var $identificador=$_POST['identificador'];
// $(".cont-optionElement").find("."+identificador).removeClass("estilSelectCateg");
});
});
</script>