D3.js selection.remove() Function
Last Updated :
31 Aug, 2020
The selection.remove() function is used to remove the selected elements from the document and return a new selection with the removed elements. Also, new selection are now detached from the DOM
Syntax:
selection.remove();
Parameters: This function does not accept any parameters.
Return Values: This function returns a new selection.
Example 1:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" path1tent =
"width=device-width, initial-scale=1.0" >
</ 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 >
|
Output:
Before clicking the “Click Here!” element:
After clicking the “Click Here!” element:
Example 2:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" path1tent =
"width=device-width, initial-scale=1.0" >
</ 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 >
|
Output:
Before clicking the click Here button:
After clicking the click Here button:
Share your thoughts in the comments
Please Login to comment...