Unselect/clear a feature from a feature layer using a query

[Jackson_CountyMissouri]

This is sort-of a follow-up to my thread here:

https://community.esri.com/t5/arcgis-api-for-javascript-questions/querying-one-feature-layer-to-use-...

I'm now trying to do the opposite: I need to unselect/clear an already selected feature in a feature layer, using a query or anything else besides getting the Popup involved. I have looked through the 4.X API as well as some examples on this board, but can't find anything that works. In the API for FeatureLayerView.highlight there is a snippet that uses highlight.remove(), but every time I try to use it, my developer console tells me that the .remove() is not a function, which doesn't surprise me because there is no .remove function anywhere I can find in the API.

I am trying to do something like this. FYI the myVariable variable is something I've already retrieved earlier that will represent the feature that's been highlighted.

function unselectParcel()
{
 var myQuery = myLayer.createQuery();
 myQuery.where = "MyFieldName = '" + myVariable + "'";

 myLayer.queryFeatures(myQuery).then(function(response)
 {
  myView.whenLayerView(myLayer).then(function(layerView)
  {
   var feature = response.features[0];
   layerView.highlight.remove(feature.attributes["OBJECTID"]);
   });
  });
}

As I said, the .remove() does not work, and I've tried all kinds of different iterations of it, to no avail. I've also tried putting the queryFeatures inside of the whenLayerView and all kinds of other arrangements, but since my selecting-the-feature function works fine and all I want to do is the reverse of that, it seems like I should just be able to make a minor change to that selecting-the-feature code - right? I can't believe they have a "highlight" function but no "clear" or "un-highlight" function.

[Tim_McGinnes]

According to the highlight function it returns a handler that you can use to remove the highlight. There is also a good sample showing how it works: Highlight point features 

First you setup a variable to hold the highlight selection handler:

let highlightSelect;

Then when you do a query you can remove the current highlight before doing the new one (you can see where it is assigning the handler to highlightSelect in line 11):

myLayer.queryFeatures(myQuery).then((result) => {
// if a feature is already highlighted, then remove the highlight
if (highlightSelect) {
  highlightSelect.remove();
}

// the feature to be highlighted
const feature = result.features[0];

// use the objectID to highlight the feature
highlightSelect = layerView.highlight(
  feature.attributes["OBJECTID"]
);

You could also just remove the highlight any time you wish:

highlightSelect.remove();

[Jackson_CountyMissouri]

^

I've already tried that. My feature is already selected before I even enter my function. If I try to just do ...

if(highlightSelect)
      highlightSelect.remove();

 ... it has no idea what highlightSelect is. So I have to define it beforehand ... somehow. I could try this:

function unselectParcel()
{
 myView.whenLayerView(myLayer).then(function(layerView)
 {	
  myLayer.queryFeatures(query).then(function(result)
   {
    let query = myLayer.createQuery();
    query.where = "MyFieldName = '" + myVariable + "'";
		
    let highlightSelect;
    highlightSelect = myView.highlight(result.attributes["OBJECTID"]);
    if(highlightSelect) highlightSelect.remove();
   });
  });
}

... but of course that doesn't work because  I'm passing in a query to myLayer.queryFeatures that isn't even declared or defined yet. So I next try this:

function unselectParcel()
{
 myView.whenLayerView(myLayer).then(function(layerView)
 {
  let query = myLayer.createQuery();
  query.where = "MyFieldName = '" + myVariable + "'";

  myLayer.queryFeatures(query).then(function(result)
   {		
    let highlightSelect = result.features[0];
    highlightSelect.remove();
   });
  });
}

Which gives me the error message: "TypeError: highlightSelect.remove is not a function." Which is what I mentioned in my first post here.

[Tim_McGinnes · Accepted solution]

You need to define the variable outside the functions in the main code (sort of like a global variable). The highlightSelect variable will know what feature was highlighted, so you don't need to query it again in the unselect function.

let highlightSelect;

function selectParcel()
{
    //Query feature first
    highlightSelect = layerView.highlight(feature.attributes["OBJECTID"]);
}

function unselectParcel()
{
    if(highlightSelect) highlightSelect.remove();
}

[Jackson_CountyMissouri]

Still getting the "TypeError: highlightSelect.remove is not a function" error message. However, at least it's clearing the newest selected feature instead of the one I want to be selected (which is the previous selected feature), so maybe at least it's doing *something*

[Tim_McGinnes]

If all you want to do is remove the previous highlight when doing a new query then try this (note: nu unselect function):

let highlightSelect;

function selectParcel()
{
    //Remove highlights
    if (highlightSelect) {
        highlightSelect.remove();
    }
    //Query feature first
    highlightSelect = layerView.highlight(feature.attributes["OBJECTID"]);
}

 If it's a more complicated scenario than that, then you may have to post some more complete code.

I recommend having a play around with that highlight point features sample I posted earlier.