La función selection.remove() se utiliza para eliminar los elementos seleccionados del documento y devolver una nueva selección con los elementos eliminados. Además, la nueva selección ahora está separada del DOM
Sintaxis:
selection.remove();
Parámetros: Esta función no acepta ningún parámetro.
Valores devueltos: esta función devuelve una nueva selección.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent=
"width=device-width, initial-scale=1.0">
<script src="https://d3js.org/d3.v4.min.js">
</script>
<style>
h1 {
color: green;
}
div {
width: 300px;
color: #ffffff;
height: 50px;
background-color: green;
margin: 10px;
}
</style>
<body>
<h1>GeeksforGeeks</h1>
<h4>D3.js selection.remove() Function</h4>
<p>The divs will be removed.</p>
<div><span>1. This div will be removed.</span></div>
<div><span>2. This div will be removed.</span></div>
<button>Click Here!</button>
<script>
function func() {
// Selecting div and
// Removing the div
var div = d3.selectAll("div")
.remove();
}
btn = document.querySelector("button");
btn.addEventListener("click", func);
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón «¡Haga clic aquí!» elemento:
Después de hacer clic en «¡Haga clic aquí!» elemento:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent=
"width=device-width, initial-scale=1.0">
<script src="https://d3js.org/d3.v4.min.js">
</script>
<style>
h1 {
color: green;
}
div {
width: 300px;
color: #ffffff;
height: 50px;
background-color: green;
margin: 10px;
}
</style>
<body>
<h1>Geeks for geeks</h1>
<h4>D3.js selection.remove() Function</h4>
<p>The <span> from div will be removed.</p>
<div><span>1. This text will be removed.</span></div>
<div><span>2. This div will not be removed.</span></div>
<button>Click Here!</button>
<script>
function func() {
// Selecting div and
// The text inside the div will be removed.
var div = d3.select("span")
.remove();
}
btn = document.querySelector("button");
btn.addEventListener("click", func);
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón haga clic aquí:
Después de hacer clic en el botón clic aquí:
