Selecting SVG and path elements with JavaScript

Question

I would like to select the last path in an SVG and remove it. I've tried a variety of methods, in pure javascript and in jquery and I don't seem to be able to access the SVG properly or its paths.

HTML:

<div id="thesvgwrapper">    
  <svg id="thesvg"...><path ....></path><path ...></svg>
</div>

I CAN clear the SVG using:

$('svg#thesvg').empty();

I CAN see the SVG's contents using:

var svgwrapper = $('#svgwrapper');
var svgcontents = $(svgwrapper).html();
alert(svgcontents);

However, I CANNOT similarly select the SVG and see it's path contents...

my goal is something like

$('#thesvg path:last').remove();

thanks a million for any help

See my comment below. Selecting the last path was actually quite easy using jquery, pure javascript probably would have worked too. there were other problems in my code. Thanks. — tuddy
– tuddy, Commented Sep 24, 2011 at 22:49

isherwood · Accepted Answer · 2016-09-09 17:28:22Z

7

Here's executable code in pure JavaScript:

var paths = svgDoc.getElementsByTagName("path");
var last_path = paths[paths.length - 1];
last_path.parentNode.removeChild(last_path);

edited Sep 9, 2016 at 17:28

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Sep 23, 2011 at 21:44

Cameron Laird

1,0755 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tuddy Over a year ago

Turns out that selecting the last path wasn't actually what was holding me back... fixed something else and it worked. this solution looks decent tho. i'm using some jquery now and this was good enough: var svg = document.createElementNS(ns, 'svg'); $('svg path:last-child').remove();

Dave F · Accepted Answer · 2011-09-23 00:26:08Z

2

I'm assuming that you're using an SVG compatible browser, such as Firefox.

It's been a while since I tried to manipulate SVG via jQuery. I remember that I was reluctant to use an SVG jQuery plugin, but without one I was having some problems accessing the elements in the DOM. Including the jQuery SVG plugin allowed me to access the elements so including it might help with the problems that you're having.

answered Sep 23, 2011 at 0:26

Dave F

3702 silver badges8 bronze badges

Collectives™ on Stack Overflow

Selecting SVG and path elements with JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related