Ready and organize it, what I'm looking for is to remove or remove the domain that I'm searching in the field when I click on the same element that has the same identifier
jQuery(document).ready(function() {
$('#categoria').on('click','.elemento',function() {
var e = $(this).clone();
var identificador = $(this).attr("iden");
if($("#campoBusq").find("."+identificador).length){
}else{
$(e).appendTo('#campoBusq');
}
});
$('#campoBusq').on('click','.elemento',function() {
$(this).remove();
});
// $('#categoria').on('click','.elemento',function() {
// $('#campoBusq').remove('.elemento',this);
// });
});
/*----------------------Busqueda Cateoria-------------------------*/
#cont-campoBusq-relat{position: relative;}
#cont-campoBusq{width: 100%;height: 50px;margin-top: 10px;display:flex;}
/*------imgBusq*/
#cont-imgBusq .imgBusq{
width: 100px;
cursor: pointer;
font-size: 18px;
max-height: 50px;
padding-top: 5px;
display:flex;
justify-content:center;
aling-items:center;
box-sizing: border-box;
background: transparent;
color: hsla(25,25%,9%,0.9);
border: 6px solid hsla(12, 10%, 86%,1);
box-shadow: 0px 1px 2px hsla(0,12%,50%,1);
}
#cont-imgBusq .imgBusq img{max-height: 50px;}
/*----select_ThCont*/
#select_ThCont select{
width: 80px;
padding: 3px;
height: 50px;
padding: 6px;
font-size: 17px;
margin-left: 5px;
max-height: 50px;
box-sizing: border-box;
background: transparent;
color: hsla(25,25%,9%,0.9);
border: 6px solid hsla(12, 10%, 86%,1);
box-shadow: 0px 1px 2px hsla(0,12%,50%,1);
}
/*-----campoBusq*/
#campoBusq{
width: 900px;
padding: 6px;
font-size: 18px;
margin-left: 5px;
box-sizing: border-box;
background: transparent;
color: hsla(25,25%,9%,0.9);
border: 6px solid hsla(12, 10%, 86%,1);
box-shadow: 0px 1px 2px hsla(0,12%,50%,1);
}
/*-------buscCateg*/
#cont-buscCateg{height: 50px;margin-left: 5px;cursor: pointer;diplay:flex;}
.buscCateg{
padding: 6px;
font-size: 18px;
color: hsla(25,25%,9%,0.9);
box-sizing: border-box;
border: 6px solid hsla(12, 10%, 86%,1);
box-shadow: 0px 1px 2px hsla(0,12%,50%,1);
background: transparent;
}
/*------categoria*/
#cont-categoria{
left: 0;
top: 60;
width: 100%;
position: absolute;
display:flex;
background: palevioletred;
}
#categoria{
width: 600px;
height: 150px;
background: cadetblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cont-campoBusq-relat">//Inicio del cuerpo
<div id="cont-campoBusq" class="centFRH">*Container*
<div id="cont-imgBusq">
<div class="imgBusq centFRHV">
<img src="../css3/fonts_icons/buscarOjo2.svg" alt="No aparece">
</div>
</div>
<div id="select_ThCont">
<select>
<option><h4>TH4</h4></option>
<option><h4>TH5</h4></option>
<option><h4>TH6</h4></option>
<option><h4>TH7</h4></option>
<option><h4>TH8</h4></option>
<option><h4>TH9</h4></option>
</select>
</div>
<div id="campoBusq"></div>
<div id="cont-buscCateg" class="centFRH">
<div class="buscCateg"><h5>Buscar por Categoria</h5></div>
</div>
<div id="cont-categoria" class="centFRH">
<div id="categoria">
<option class="elemento 1" iden="1"></option>
<option class="elemento 2" iden="2"></option>
<option class="elemento 3" iden="3"></option>
<option class="elemento 4" iden="4"></option>
<option class="elemento 5" iden="5"></option>
</div>//Fin categoria
</div>//Fin categoria container
</div>//Fin Container
</div>//Fin del Cuerpo Usuario