Remove styles by clicking on the X- (Remove this style estilSelectCateg)

Question

Remove styles by clicking on the X- (Remove this style estilSelectCateg)

Navigation

#1 by (1 votes)

0

It was already possible to insert div with jquery, now we can remove styles by clicking on the X and not with the full content

From HTML

  <div id="cont-categoria" class="centFRH">
            <div id="categoria">                          
               include("selectCategJquery.php");
            <div class="mensCateg">Selecione las Categorias</div>
            </div>
    </div>

From 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>

CSS Styles

.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;
}

Presentation Image

They are Two details 1: Delete and 2: Remove Styles 1: Remove from #campoBusq only when giving in X 2: Remove Cateria selection styles by clicking on the X

How time step 2 is displayed in the image, where?; just in the style of backround that was not removed by removing the #campoBusq element This is Step 1 missing

jquery

asked by Gamez 17.03.2017 в 18:30

source

1 answer

Consume local web service from my android device Move google maps API mark by clicking

score 1 · Accepted Answer

To create elements you can use jQuery like this:

var div = $('<div/>', {
    'class' : 'aquiLaClase',
    'id'    : 'unIdSiQuieres'
});

You can add the attributes you want. If you want the pure div then enough:

var div = $('<div/>');

Now, to add it to another div (in this case I think you want to add it to # cont-optionElemen, just make it an append.

$("#cont-optionElemen").append(div);