select2 clone Копирование блоков содержащих селект2 и повторная привязка события -- как быть, Удаление span со значением

Ситуация

Происходит копирование html-кода select-а, к которому привязан select2.

По теме

Сразу отметим, что селект2 по сути добавляет дополнительный span, который и является видимым представлением селектбокса, сам же селектбокс скрывается.
Если просто после клонирование выполнить повторную привязку, то мы получим два спана.

Также в случае если вы производите клонирование с data-атрибутами, то вызов .select2('destroy') приведёт к затрагиванию оригинала (который клонируется).

Как рекомендуется клонировать (легко)

Для версии 4 рекомендуют так:

$select.select2('destroy').clone().select2();

-- но если вы клонируете реально отображаемый на странице элемент, то это очень неудобно, так как это файтически удаляет селект2 с образца (который клонируется).

Просто удаляем старый span

Можно использовать такой подход для переинициаллизации:

/**
 * Remove select2 span container
 * 
 * @returns {type.fn.removeSelect2Span.$this}
 */
$.fn.removeOldValueText = function () {
	var $this = $(this); // your select
	var $oldSpan = $this.next('span.select2-container');
	// console.log('$oldSpan:', $oldSpan);
	$oldSpan.remove(); // удаляем отображаемый спан
       $this.empty(); // удаляем options select-элемента

	return $this;
}

$clonedElement.removeSelect2Span(); // удаляем старое
$clonedElement.select2(); // заново инициллизируем

-- это сработает и для тех элементов, что инициллизированны (судя по практике можно не боятся повторной инициллизации select2).
Нам пришлось выполнить:

$this.empty(); // удаляем options select-элемента

так как, если в исходном селекте уже было выбрано значение. но при повторной инициаллизации на копии селект2 выставит именно его, а часто нужно чтобы ничего не было выбрано.