JS Array Remove from last and remove all buttons

I'm Like to add two buttons, like [REMOVE FROM LAST] and [REMOVE ALL] to remove marks on the image.

I have added a function to clear array, but when I click the button, nothing happen. Marks are not removed, maybe this approach is not a correct way to do this.

Can anyone help me to do this please? Thanks to all.

var App = App || {};
App.points = []; // Use array to store objects like [{x,y,r}, {x,y,r} ...]


jQuery(function($) {

  const $radius = $(".radius");

  $('#image_preview').on('click', function(ev) {

    const $this = $(this),
       r = parseInt($radius.val().trim(), 10), // Parse as Integer radix 10
      o = $this.offset(),
      y = ev.pageY - o.top,
      x = ev.pageX - o.left;

    $("<div />", {
      "class": "circle",
      css: {
        top: y,
        left: x,
        width: r * 2,
        height: r * 2,
      },
      appendTo: $this // append to #image_preview!
    });

    // Append data to App.points
    App.points.push({x,y,r});
    // Test
    console.log( App.points )

  });

});


function clearArray() {
  return App.points = []
}

#image_preview {
  position: relative; /* Add this since child are absolute! */
  background: #eee;
  margin: 15px;
  cursor: crosshair;
}

#image_preview img {
  display: inline-block;
  vertical-align: top;
}

.circle {
  position: absolute;
  background: rgba(255, 0, 0, 0.2) url("https://i.imgur.com/qtpC8Rf.png") no-repeat 50% 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%); /* use translate instead of JS calculations */
}

.radius {
  position: absolute;
}

<button onclick="clearArray();">Clear Array</button>Radius: <input type="text" value="20" class="radius" name="radius">

<div id="image_preview">
  <img src="https://i.imgur.com/B7VsSq3.png" alt="graph">
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/XAiNQ1h