D3.js selection.remove() Function - GeeksforGeeks

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 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>
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 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>
Output:
Before clicking the click Here button:
After clicking the click Here button:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript