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>neveropen</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 neveropen</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:
