如何实现selectize-input列表项可编辑？选中项无法删除求助

Got it, let's tackle this Selectize issue fast—since you can't share the full JavaScript code, here are some straightforward checks and workarounds you can implement right away:

• Enable the Official Remove Button Plugin
  Selectize has a built-in remove_button plugin that adds delete buttons to selected items. First, make sure your initialization code includes this plugin in the config:

  $('your-select-element').selectize({
    plugins: ['remove_button'], // Add this line if missing
    // Your other config options...
  });
  

  If the button still doesn't show up, check your CSS—custom styles might be hiding it. Inspect the selected item's .remove class and ensure it's not set to display: none; change it to display: inline-block if needed.

• Manually Add a Delete Button via Event Listener
  If the plugin isn't working for some reason, you can dynamically inject a delete button whenever an item is added, then bind a click event to remove it:

  // Grab your Selectize instance first
  const selectizeInstance = $('your-select-element').selectize()[0].selectize;
  
  // Listen for when an item is added
  selectizeInstance.on('item_add', function(value, itemElement) {
    // Create the delete button
    const deleteBtn = document.createElement('span');
    deleteBtn.className = 'custom-remove-btn';
    deleteBtn.textContent = '×';
    deleteBtn.style.cssText = 'margin-left: 8px; cursor: pointer; color: #999;';
  
    // Add it to the selected item
    itemElement.appendChild(deleteBtn);
  
    // Bind click to remove the item
    deleteBtn.addEventListener('click', () => {
      selectizeInstance.removeItem(value);
      selectizeInstance.refreshOptions(); // Refresh to update the UI
    });
  });
  

• Enable Keyboard-Based Removal
  For a quick usability boost, let users delete selected items with keyboard keys like Backspace or Delete. Add these options to your Selectize config:

  $('your-select-element').selectize({
    // Other configs...
    keyDelete: true, // Allow Delete key to remove selected items
    keyBackspace: true // Allow Backspace key to remove selected items
  });
  

• Check for Custom Event Blockers
  Sometimes custom JavaScript in your project might be preventing the delete action. Open your browser's DevTools, inspect the selected item, and check the "Event Listeners" tab for any click events that use preventDefault() or stop propagation. If you find any, temporarily disable them to test if that's the issue.

内容的提问来源于stack exchange，提问作者Don Benito