Descripción

Mi proyecto de página web tiene un fondo dinámico VantaJS y estoy tratando de agregar una opción de casilla de verificación para deshabilitar el fondo dinámico.

La sección "Limpieza" de los documentos oficiales de VantaJS explica cómo destruir un efecto Vanta: https://github.com/tengbao/vanta#cleanup

 const effect = VANTA.WAVES('#my-background') effect.destroy() // eg call this in React's componentWillUnmount

Problema

Aquí está mi código de ejemplo, donde agregué una casilla de verificación de Bootstrap que (según tengo entendido) debería destruir el efecto Vanta cuando se alterna: https://jsfiddle.net/playdohsniffer/un6hx1q5/131/

¿Por qué no se elimina el efecto Vanta cuando se activa la casilla de verificación?

Parece que debería funcionar usando Vanilla Javascript. ¿Se requiere usar React para invocar dicha función destroy()? No estoy familiarizado con React framework en absoluto ...

Más detalles

Soy consciente de que hay varias formas de ocultar/eliminar elementos específicos del DOM usando JavaScript estándar. En mi código de ejemplo, agregué dos botones adicionales que demuestran dos métodos de este tipo:

• propiedad de visibilidad de estilo
• Método HTML DOM remove()

Sin embargo, estos diversos métodos no son deseables ya que ocultan/eliminan todo el contenido dentro del div. En cambio, necesito descubrir cómo destruir el elemento VantaJS que se representa en el fondo div (limpiar los recursos consumidos es la forma correcta de todos modos ...)

Cualquier consejo es apreciado.