Open In App

How to remove SVG content?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In order to remove SVG content, you can use the remove() function provided by D3.js. The remove() function is used along with two methods which are also provided by D3.js. The following methods are:

Using select() Method with remove() Method: The d3.select() method is used to select the first element that needs to remove. 

Syntax:

d3.select("element").remove()

Example: In this example, the first paragraph (p) element is removed. 

html




<!DOCTYPE html>
<html>
<head>
    <title>
        How can I remove SVG content?
    </title>
  
    <script src=
      </script>
</head>
  
<body style="text-align:center">
  
    <h1 style="color:green">
          GeeksforGeeks
      </h1>
    <h3> How can I remove SVG content?</h3>
    <p>Geeks1</p>
    <p>Geeks2</p>
    <p>Geeks3</p>
    <script>
        // Calling the selectAll() function
        d3.select("p").remove();
    </script>
</body>
</html>


Output:

 

Using selectAll() Method with remove() Method: The d3.selectAll() method is used to select all the element that matched and remove it. Syntax:

d3.selectAll("element").remove()

Example: In this example, all paragraph (p) elements are removed. 

html




<!DOCTYPE html>
<html>
<head>
    <title>
        How can I remove SVG content?
    </title>
  
    <script src=
      </script>
</head>
  
<body style="text-align:center">
  
    <h1 style="color:green">
          GeeksforGeeks
      </h1>
    <h3> How can I remove SVG content?</h3>
    <p>Geeks1</p>
    <p>Geeks2</p>
    <p>Geeks3</p>
    <script>
        // Calling the selectAll() function
        d3.selectAll("p").remove();
    </script>
</body>
</html>


Output:

 How can I remove SVG content?



Last Updated : 06 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads