Remove variables from single variant selector on product pages that are sold out

1 Remove Variants from Single Option Variants that are sold out

{% comment %}Place this at the bottom of the section/product.template.liquid file{% endcomment %}
{% if product.options.size == 1 %}
  <script>
    var product_variants_removed = [
      {%- for variant in product.variants -%}
     	{%- unless variant.available -%}
          '{{ variant.title }}',
        {%- endunless -%}
      {%- endfor -%}
    ];
  </script>
{% endif %}

2 theme.js

/* ALL OTHER THEMES - Place this at the bottom of assets/theme.js */

$( document ).ready(function() {
  if( typeof product_variants_removed != undefined ) {	// was there items to be removed?
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
        observer.disconnect();
      }
      var config = { childList: true, subtree: true };
      var observer = new MutationObserver(function() { 
        product_variants_removed.forEach(function(item){
          $('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
        });
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
      $('.single-option-selector').trigger('change');
    }
  }
});

3 Brooklyn-theme.js

/* BROOKLYN THEME ONLY - Place this at the bottom of assets/theme.js */

$( document ).ready(function() {
  $('single-option-selector__radio').trigger('change');
  if( typeof product_variants_removed != undefined ) {	// was there items to be removed?
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
        observer.disconnect();
      }
      var config = { childList: true, subtree: true };
      var observer = new MutationObserver(function() { 
        product_variants_removed.forEach(function(item){
		      $('#ProductSelect-option-size-'+item).remove();
          $('label[for=ProductSelect-option-size-'+item+']').remove();
        });
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
      $('.single-option-selector__radio').trigger('change');     
    }
  }
});

4 Narrative custom.js

/* NARRATIVE THEME ONLY - Place this at the bottom of custom.js */

$( document ).ready(function() {
  if( typeof product_variants_removed != undefined ) {	// was there items to be removed?
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
    var config = { childList: true, subtree: true };
        product_variants_removed.forEach(function(item){
          $('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
        });    
    }
  }
});

Testing phase 1:

• Debut
• Boundless
• Pop
• Brooklyn
• Supply
• Simple
• Minimal
• Venture
• Narrative
• Jumpstart