swipe witget on off control

[emreaktas1]

hello,
I open the swipe widget with the button function.
How can I turn it back off?

sample code 

I want to turn the swipe widget on and off with a button.

[JeffreyThompson2]

This should destroy the swipe widget.

view.ui.remove(swipe)

This should hide the swipe widget without destroying it.

swipe.visible = false

I'd use the second one if I want to toggle the swipe back on with the same configuration, as it should be a bit faster than having to re-create the swipe from scratch.

[emreaktas1]

My codes did not work as I wanted.
How can I edit here?

[JeffreyThompson2]

The way you have defined swipe is scope bound, so you are unable to call it again later. Try something like this.

let swipe = null
const swipeButton = document.getElementById('swipeButton')
swipeButton.addEventListener('click', toggleSwipe)
function toggleSwipe(){
   if (swipe) {
      view.ui.remove(swipe)
      swipe = null
   } else {
      swipe = new Swipe({
         leadingLayers: [layer],
         trailingLayers: [layerParse1],
         position: 50,
         view: view
      })
      view.ui.add(swipe)
   }
}

This should make a button that adds the swipe on the first click and removes it on a second click.

[emreaktas1]

On the second click the swipe widget was not removed completely.
It just works invisibly

[JeffreyThompson2 · Accepted solution]

I looks like we need to use the destroy() method.

let swipe = null
const swipeButton = document.getElementById('swipeButton')
swipeButton.addEventListener('click', toggleSwipe)
function toggleSwipe(){
   if (swipe) {
      swipe.destroy()
      swipe = null
   } else {
      swipe = new Swipe({
         leadingLayers: [layer],
         trailingLayers: [layerParse1],
         position: 50,
         view: view
      })
      view.ui.add(swipe)
   }
}

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Swipe.html#destroy

[emreaktas1]

Yes, this is the destroy() method. it worked😍

[GregoryBologna]

I have swipeWidget global and call removeSwipeWidget anytime before adding swipe widget.

    const removeSwipeWidget = () => {
      try {
        if (swipeWidget) {
          view.ui.remove(swipeWidget);
          // destroy if object
          if (swipeWidget?.constructed) swipeWidget.destroy();
          swipeWidget = null;
        }
      } catch (error) {
        console.log(error);
      }
    }