title: How do you remove an annotation from Highcharts?
body: <p>I am using Highcharts 6. I am using the following event to get my data point id and to open popover with a simple form.</p>
  
  <pre><code>plotOptions: {
      series: {
          point: {
              events: {
                  click: function(e) {
                      selected_point = e.point.id
                      $('#chart').popover("toggle")
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>When the form is submitted, an annotation is set on that data point.</p>
  
  <pre><code>$('body').on('click', '#save_annotation', function() {
      var text = $("#annotationForm").val()
      myChart.addAnnotation({
          labels: [{
              point: selected_point,
              text: text
          }]
      })
      $('#chart').popover("toggle")
  }) 
  </code></pre>
  
  <p>So far this is working great. I need a way to modify and delete an existing annotation. It seems that I should be using <a href="https://api.highcharts.com/class-reference/Highcharts.Chart.html#removeAnnotation" rel="nofollow noreferrer">removeAnnotation()</a> but I can't seem to figure out how to use it. The documentation indicates that I need to pass an annotation id. Where can I find this id? When I call myChart.annotations I can see an array of objects. Each object is an annotation but there is no id property.</p>
  
  <p>I was able to use a forEach loop to delete a specific annotation with the <a href="https://api.highcharts.com/class-reference/Highcharts.Annotation#destroy" rel="nofollow noreferrer">destroy()</a> method but it leaves an item in the annotations array and is not recommended.</p>
  
  <p>What is the proper way to remove an annotation? How can I get the id for the annotation? This post indicates that addAnnotation() returns the annotation which it does but the returned object has no as shown. For example in my case annotation.id returns undefined.</p>