score:12

Accepted answer

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

score:0

For anyone using polymer or who just wants to do this using pure js, here's how to manage an object that will be created on load and then redrawn every time the chart updates:

http://jsfiddle.net/57xw879k/1/

The advantage of this is that it's added to the chart object, so you're not relying on the DOM or any particular method of accessing it.

http://api.highcharts.com/highcharts/chart.events is also worth a read if you want to perform actions at different times.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

<button id="remove">
  Remove label
</button>
<button id="add">
  Add label
</button>

JS:

const chart = Highcharts.chart('container', {

  chart: {
    events: {
      render: function() {
        handleLabel(this)
        var label = this.renderer.label('The chart was just redrawn', 100, 120)
        .attr({
          fill: Highcharts.getOptions().colors[0],
          padding: 10,
          r: 5,
          zIndex: 8
        })
        .css({
          color: '#FFFFFF'
        })
        .add()
        setTimeout(function () {
          label.fadeOut()
        }, 1000)
      }
    }
  },
  title: {text: 'Highcharts label actions'},
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },    
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]    
})

function handleLabel(chart) {
    if (chart.myLabel) {
    chart.myLabel.destroy()
    addLabel(chart)
  } else {
    addLabel(chart)
  }
}

function addLabel(chart) {
  var point = chart.series[0].points[8];
  chart.myLabel = chart.renderer.label('Max observation', 270, 50, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
    .css({
        color: '#FFFFFF'
    })
    .attr({
      fill: 'rgba(0, 0, 0, 0.75)',
      padding: 8,
      r: 5,
      zIndex: 6
    })
    .add()
}

function removeLabel(chart) {
  !objectIsEmpty(chart.myLabel) && chart.myLabel && chart.myLabel.destroy()
}

function objectIsEmpty(obj) {
  return Object.keys(obj).length === 0 && obj.constructor === Object
}

document.getElementById('remove').addEventListener('click', () => removeLabel(chart))
document.getElementById('add').addEventListener('click', () => addLabel(chart))

score:1

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

score:15

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

Related Query

More Query from same tag