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

Answer 1

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);

Answer 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.