La tarea es eliminar todas las clases de un determinado elemento a partir de un prefijo específico. A continuación se describen algunas de las técnicas más utilizadas. Vamos a utilizar JavaScript.
Enfoque 1:
- Seleccione un elemento en particular.
- Use la propiedad .className para obtener acceso a todas las clases.
- Use el método .replace() para reemplazar todas las clases específicas por espacio (lo que significa que las clases se eliminan del elemento).
- En este ejemplo, se usa RegExp para reemplazar.
Ejemplo 1: Este ejemplo utiliza el enfoque discutido anteriormente.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to remove all classes that
begin with a certain string JavaScript?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
#div {
height: 100px;
}
.el-color {
color: white;
}
.el-background {
background: green;
}
.el-border {
border: 3px solid blue;
}
</style>
</head>
<body id="body" align="center">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 15px;
font-weight: bold;">
</p>
<div id="div"
class="el-color el-background el-border">
Div Element
</div>
<br>
<button onclick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN"
style="font-size: 20px;
font-weight: bold;
color:green;">
</p>
<script>
var el_up = document.getElementById('GFG_UP');
var el_down = document.getElementById('GFG_DOWN');
el_up.innerHTML =
"Click on the button to remove all "+
"classes starting with certain character.";
function GFG_Fun() {
$('#div')[0].className =
$('#div')[0].className.replace(/\bel.*?\b/g, '');
el_down.innerHTML =
"Every class starting with 'el' is removed from the element.";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2
- Seleccione un elemento en particular.
- Use la propiedad .className para obtener acceso a todas las clases.
- Use el método .split() para obtener todas las clases como un elemento.
- Use la función .filter() para filtrar las clases que no comienzan con cierto carácter.
- Finalmente, ponga esas clases con el elemento.
Ejemplo 2: Este ejemplo utiliza el enfoque discutido anteriormente.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to remove all classes that
begin with a certain string JavaScript?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
#div {
height: 100px;
}
.el-color {
color: white;
}
.el-background {
background: green;
}
.el-border {
border: 3px solid blue;
}
</style>
</head>
<body id="body" align="center">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 15px;
font-weight: bold;">
</p>
<div id="div"
class="el-color el-background el-border">
Div Element
</div>
<br>
<button onclick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN"
style="font-size: 20px;
font-weight: bold;
color:green;">
</p>
<script>
var el_up = document.getElementById('GFG_UP');
var el_down = document.getElementById('GFG_DOWN');
var el = document.getElementById('div');
el_up.innerHTML = "Click on the button to remove "+
"all classes starting with certain character.";
function GFG_Fun() {
var startsWith = "el";
var classes = el.className.split(" ").filter(function(v) {
return v.lastIndexOf(startsWith, 0) !== 0;
});
el.className = classes.join(" ").trim();
el_down.innerHTML =
"Every class starting with 'el' is removed from the element.";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA