Getting a syntax error when attempting to remove an item from Selectize input

Question

Whenever i try to remove an item from Selectize input, i get the following error in the console:

index.js:12 Uncaught Error: Syntax error, unrecognized expression: option[value="{"id":"allCustomers","type":"keyword"}"]
    at Sizzle.error (index.js:12:1)
    at Sizzle.tokenize (index.js:12:1)
    at Sizzle.select (index.js:12:1)
    at Function.Sizzle [as find] (index.js:12:1)
    at jQuery.fn.init.find (index.js:12:1)
    at Selectize.updateOriginalInput (<anonymous>:31913:16)
    at Selectize.removeItem (<anonymous>:31720:9)
    at HTMLDivElement.<anonymous> (<anonymous>:34943:33)
    at HTMLDocument.dispatch (index.js:12:1)
    at elemData.handle (index.js:12:1)

The code i use for removing the item looks like this:

    $(document).on('click', 'div.selectize-input div.item', function (e) {
            var select = $('#customerDropdownMailform').selectize();
            var selectedValue = $(this).attr("data-value");
            select[0].selectize.removeItem(selectedValue);
            select[0].selectize.refreshItems();
            select[0].selectize.refreshOptions();
        });

Anyone got any ideas as to why it breaks? The examples i find online recommend doing the above mentioned solution for removing the item.

I suspect that maybe the data-value is the culprit. I have tried modyfing it so that it is an int or json stringified, but i get the same syntax error.

Answer 1

The problem is that you're using double quotes as the delimiters around the value in the [value=...] selector. The double quotes in the JSON are matching that, so it doesn't treat it as a single value.

Use single quotes in selector.

<div class="item" data-value='option[value=&apos;{"id":"allCustomers","type":"keyword"}&apos;]'>

You need to use ' so the single quotes won't match the quotes around data-value=