Each time a user clicks on a list I add a new graphic on top of the clicked item.
However, I want to remove the last graphic that was created.
fyi, I can't do view.graphics.clear because before the user click I've created graphics that I need to keep.
This creates the graphic without problems.
function onListClickHandler(event) {
const target = event.target;
const resultId = target.getAt tribute("data-result-id");
// get the graphic corresponding to the clicked parcel
const result = resultId && graphics && graphics[parseInt(resultId,
10)];
var selectFillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [111, 0, 255, 0.3],
outline: { // autocasts as new SimpleLineSymbol()
color: [0,0,0],
width: 2
}
};
var polygonGraphic = new Graphic({
geometry: result.geometry,
symbol: selectFillSymbol,
attributes: simpleFillAttributes
});
view.graphics.add(polygonGraphic);
But none of these ideas below remove the graphic
capturing the reference of the last object
var lastResult = result
view.graphics.remove(lastResult);
view.graphics.remove(graphics[parseInt(lastResultId,10)];
I tried adding an attribute to the new object
since result.attributes.OBJECTID works and gives back the objectid of the original clicked item.
var simpleFillAttributes = {
Name: "newgraphic-" + result.attributes.OBJECTID
};
var polygonGraphic = new Graphic({
geometry: result.geometry,
symbol: selectFillSymbol,
attributes: simpleFillAttributes
});
and then looping through all the graphics but this give me "cannot read property Name of null"
view.graphics.forEach(function (graphic) {
if (graphic.attributes["Name"] == "newgraphic-" + result.attributes.OBJECTID) {
graphic.remove(graphic);
}
});
How can I remove the last graphic created?