MaterialSelect Destroy

jQuery.fn.extend({
    destroyMaterialSelect: function() {
        return this.each(function() {
            let wrapper = $(this).parent();
            let core = wrapper.find('select');
            wrapper.after(core.removeClass('initialized').prop('outerHTML'));
            wrapper.remove();
        });
    }
});

usage:

$('SELECTOR').destroyMaterialSelect();

Enjoy!

Hi, Is this issue fixed on 4.8.0?

I just added v4.11.0, and "destroy" doesn't work 100% of the time. Including what @gianlucagiacometti posted 7 months ago, doesn't always work.

I am working with cascading selects "country - state - city". In the country list I select "United States"... and it shows all 50 states, plus other US territories, then I switch to "Vatican" (a "City-State") -- which shows that the "destroy" method is successful, but I switch to a different county ---- ok, I have no idea how to explain it from this point. But eventually there is a bit of a retrieve lag of sorts... well while I was typing this, I had a crazy idea of doing the following - which actually works, no lag in data retrieval.

$('.mdb-select').materialSelect();
$('#country').on('change', function () {
  $.ajax({
    // boring ajax stuff
  }).done(function (data, textStatus, jqXHR) {
    $('#adminarea1').materialSelect({
      destroy: true
    });
    $('#adminarea1').materialSelect();
    $('#adminarea1').html(data);

    // crazy idea that works below this line
    $('#adminarea1').materialSelect({
      destroy: true
    });
    $('#adminarea1').materialSelect();
    $('#adminarea1').html(data);
  });
});

I should also ask, can anyone else confirm this same behavior with "Cascading Dropdowns" with PHP and a database? Or just me?

Thanks.

Add attribute <select class="mdb-select ... " data-stop-refresh="true">...</select> in your select as follows for browser not to freeze while populating select with options via ajax;

Before populating select destroy material select! I've noticed that mdb pro has a bug in initialization or wrong documentation. Due to the fact that after initialization of select (calling the method $('.mdb-select') materialSelect()) mdb.js generates parent <div class="select-wrapper mdb-select" ...>...</div> while cloning classes from select class. That means that when you call $('.mdb-select').materialSelect({destroy: true}) it removes select parent .e.g. .select-wrapper and parent of .select-wrapper outer html which breaks layout as you noticed =);

For that reason just call destroy as follows $('select.mdb-select').materialSelect({destroy: true}) WORKS FINE =);

Call your ajax to pupulate your select and reinitialize it $('select.mdb-select').materialSelect().

Hi!

I update my MDBootstrap 4.12.0 to 4.16.0 and the materialselect destroy isn't working.

The destroy code in 4.12.0:
this.view.$nativeSelect.unwrap();

The destroy code in 4.16.0:
if( this.view.$nativeSelect.hasClass('select-wrapper')) {
this.view.$nativeSelect.find('select').unwrap();
}

The bug in the source:

Thanks!

Seriously. One year for this? It's just adding a ".parent()".

For those who are still waiting for this issue to be fixed, this is my code:

import MaterialSelectViewRenderer from "mdbootstrap-pro/src/js/pro/material-select/material-select-view-renderer";

// Fix issue with material select destroy
MaterialSelectViewRenderer.prototype.destroy = function ()
{
    const currentUuid = this.view.$nativeSelect.data( 'select-id' );

    this.view.$nativeSelect.data( 'select-id' , null ).removeClass( 'initialized' );
    const parent = this.view.$nativeSelect.parent();
    parent.find( 'span.caret' ).remove();
    parent.find( 'input' ).remove();

    if ( parent.hasClass( 'select-wrapper' ) )
    {
        parent.find( 'select' ).unwrap();
    }

    $( `ul#select-options-${ currentUuid }` ).remove();
};

If you're not using Webpack, you should import the MaterialSelectViewRenderer class in your own way. Once imported (required, whatever, ...), override the destroy prototype with this code.

If you're using Webpack and Laravel Mix, I've published here how to import MDB with Webpack and Laravel Mix.