Highcharts remove renderer path

Question

Here is how it's added:

chart.renderer.path(['M', 1200, 10, 'V', 1500, 0])
            .attr({
                'stroke-width': 2,
                stroke: 'red'
            })
            .add();

But how to delete it?

var x = someValue;
chart.renderer.path(['M', x, 10, 'V', 1500, 0])
        .attr({
            'stroke-width': 2,
            stroke: 'red'
        })
        .add();

Answer 1

For future Googlers, this will work:

var path = chart.renderer.path(['M', 1200, 10, 'V', 1500, 0])
.attr({
    'stroke-width': 2,
    stroke: 'red'
})
.add();

// remove the path
path.element.remove();

Answer 2

UPDATED

here is how you remove it jsFiddle

  function(chart) { // on complete

    chart.renderer.path(['M', 0, 0, 'L', 100, 100, 200, 50, 300, 100])
        .attr({
            'stroke-width': 2,
            stroke: 'red'
        })
        .add();
    $(":button").click(function(){
        $('path[d="M 0 0 L 100 100 200 50 300 100"]').remove() ;
         });
    });

remove path by id

jsFiddle

    function(chart) { // on complete

    chart.renderer.path(['M', 0, 0, 'L', 100, 100, 200, 50, 300, 100])
        .attr({
            'stroke-width': 2,
            stroke: 'red' ,
            id :'myPath'
        })
        .add();
    $(":button").click(function(){
        $("#myPath").remove() ;
                                        });
     });

Answer 3

I have found that element.remove() works fine in Chrome, but not when running in a WebView on Android, for example, and may therefore not work in other browser environments.

Delving through the object's properties and methods, I found a safeRemoveChild() method, which seems to work even in a WebView. So that's something along the lines of:

var path = chart.renderer.path(['M', 1200, 10, 'V', 1500, 0])
.attr({
    'stroke-width': 2,
    stroke: 'red'
})
.add();

// remove the path
path.safeRemoveChild(path.element);