2021-02-06 04:42:36 +00:00
---
id: bad87fee1348bd9aed918626
2021-04-09 16:58:02 +00:00
title: Elimina clases de un elemento con jQuery
2021-02-06 04:42:36 +00:00
challengeType: 6
forumTopicId: 18264
required:
-
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
dashedName: remove-classes-from-an-element-with-jquery
---
# --description--
2021-04-09 16:58:02 +00:00
De la misma manera en que puedes agregar clases a un elemento con la función `addClass()` de jQuery, puedes eliminarlos con la función `removeClass()` de jQuery.
2021-02-06 04:42:36 +00:00
2021-04-09 16:58:02 +00:00
Así es como lo harías para un botón específico:
2021-02-06 04:42:36 +00:00
2021-04-09 16:58:02 +00:00
```js
$("#target2").removeClass("btn-default");
```
2021-02-06 04:42:36 +00:00
2021-04-09 16:58:02 +00:00
Eliminemos la clase `btn-default` de todos nuestros elementos `button` .
2021-02-06 04:42:36 +00:00
# --hints--
2021-04-09 16:58:02 +00:00
La clase `btn-default` debe ser eliminada de todos los elementos `button` .
2021-02-06 04:42:36 +00:00
```js
assert($('.btn-default').length === 0);
```
2021-04-09 16:58:02 +00:00
Sólo debes usar jQuery para eliminar esta clase del elemento.
2021-02-06 04:42:36 +00:00
```js
assert(code.match(/btn btn-default/g));
```
2021-04-09 16:58:02 +00:00
Solo debes eliminar la clase `btn-default` .
2021-02-06 04:42:36 +00:00
```js
assert(
code.match(
/\.[\v\s]*removeClass[\s\v]*\([\s\v]*('|")\s*btn-default\s*('|")[\s\v]*\)/gm
)
);
```
# --seed--
## --seed-contents--
```html
< script >
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");
});
< / script >
<!-- Only change code above this line -->
< div class = "container-fluid" >
< h3 class = "text-primary text-center" > jQuery Playground< / h3 >
< div class = "row" >
< div class = "col-xs-6" >
< h4 > #left-well< / h4 >
< div class = "well" id = "left-well" >
< button class = "btn btn-default target" id = "target1" > #target1< / button >
< button class = "btn btn-default target" id = "target2" > #target2< / button >
< button class = "btn btn-default target" id = "target3" > #target3< / button >
< / div >
< / div >
< div class = "col-xs-6" >
< h4 > #right-well< / h4 >
< div class = "well" id = "right-well" >
< button class = "btn btn-default target" id = "target4" > #target4< / button >
< button class = "btn btn-default target" id = "target5" > #target5< / button >
< button class = "btn btn-default target" id = "target6" > #target6< / button >
< / div >
< / div >
< / div >
< / div >
```
# --solutions--
```html
< script >
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");
$("button").removeClass("btn-default");
});
< / script >
<!-- Only change code above this line -->
< div class = "container-fluid" >
< h3 class = "text-primary text-center" > jQuery Playground< / h3 >
< div class = "row" >
< div class = "col-xs-6" >
< h4 > #left-well< / h4 >
< div class = "well" id = "left-well" >
< button class = "btn btn-default target" id = "target1" > #target1< / button >
< button class = "btn btn-default target" id = "target2" > #target2< / button >
< button class = "btn btn-default target" id = "target3" > #target3< / button >
< / div >
< / div >
< div class = "col-xs-6" >
< h4 > #right-well< / h4 >
< div class = "well" id = "right-well" >
< button class = "btn btn-default target" id = "target4" > #target4< / button >
< button class = "btn btn-default target" id = "target5" > #target5< / button >
< button class = "btn btn-default target" id = "target6" > #target6< / button >
< / div >
< / div >
< / div >
< / div >
```