How to remove styles with jQuery when clicking on an HTML element

Question

How to remove styles with jQuery when clicking on an HTML element

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

My Question in the image

   $('#campoBusq').on('click','.xClones',function() {
                    $(this).parent().remove();
                    $("#categoria").find(".cont-optionElement").removeClass("estilSelectCateg");                
      });

jquery

asked by Gamez 18.03.2017 в 02:15

source

2 answers

Create a branch without files from an existing repository.git Function to search in a chain the commas and replace them by point

score 1 · Answer 1

I'm still not so sure I understand your problem but check this snipped and run it.

As mentioned, first we select all the elements, we add an identifier and then we clone it in such a way that the clone has this same identifier.

Then we add listeners of events to the click of both sets of elements and when we click we look in their counterpart container and we remove the class to its parent elements and so on.

It's nice to use jQuery just for the necessary, greetings

$().ready(function(){
/* selecionamos todas las acciones */
var acciones = document.querySelectorAll(".accion");
 
for(let i=0, accion; accion = acciones[i]; i++) {
/* le agregamos un identificador */
  accion.dataset.indice = i;
  /* las clonamos, el identificador se clona tambien */
  $(accion.parentNode).clone().appendTo("#etiquetas");
}

$("#etiquetas").on("click",".accion", function(){
/* buscamos su correspondiente accion */
	var selector = "#acciones [data-indice='" + this.dataset.indice + "']";
	let accion = document.querySelector(selector);
	accion.parentNode.classList.toggle("active");
	this.parentNode.classList.toggle("active");
});

$("#acciones").on("click",".accion", function(){
/* buscamos su correspondiente etiqueta*/
	var selector = "#etiquetas [data-indice='" + this.dataset.indice + "']";
	let accion = document.querySelector(selector);
	accion.parentNode.classList.toggle("active");
	this.parentNode.classList.toggle("active");
});

});

.active {
			background-color: red;
			margin-bottom: 5px;
		}
		.accion {
			box-shadow: 1px 1px 1px black;
		}
		.item { padding: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="acciones" style='min-height:100px; border:1px solid black; margin-bottom: 10px'>
	<div class="active item">
		<a href="javascript:void(0)"  class="accion">Ganar el juego</a>
	</div>
	<div class="item">
		<a href="javascript:void(0)"  class="accion">Rendirce</a>
	</div>
	<div class="item">
		<a href="javascript:void(0)"  class="accion">Salir</a>
	</div>
</div>

<div id="etiquetas" style='height:100px; border:1px solid red;'> </div>

score 1 · Answer 2

To remove classes from some array position, you can still use:

eq(5).removeClass('selected');

This way you save the find and select all the elements, if not, only the one that specifies you in particular. Anyway you can combine it with index(this) , to be able to know the position of the element that you access.

You can use it as:

if(imagenActual.index() != 5)

I leave a link where they use it in an exercise, saving it in a variable .index() .