How to delete div cloned inside another div

0

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

    
asked by Gamez 12.03.2017 в 03:52
source

0 answers