Modify X-editable templates on a per element basis (not globally)

Question

I added a delete button to the X-editable form using the following script (live demo).

How can this be accomplished for only some elements (i.e. .editable-with-delete) and not globally?

$('.editable').editable();

$.fn.editableform.buttons += '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>';

$('.editable-with-delete').editable();


$("#list").on("click", "i.glyphicon-trash", function() {
  console.log('delete')
});

<h4>X-editable: display checklist as UL</h4>
<ul id='list'>
  <li class='editable-with-delete'>Editable element with delete</li>
  <li class='editable'>Editable element without delete</li>
  <li class='editable'>Editable element without delete</li>
</ul>

Answer 1

With the features currently offered by the X-editable library, I'm not seeing a way to do what you want to do just by setting options for your editables.

However, you could do it by listening to the shown event and adding the button in the event handler. Here is an example:

$('.editable').editable();

$(".editable-with-delete")
  .on("shown", function(ev, editable) {
    const buttons = editable.container.$form.find(".editable-buttons")[0];
    buttons.insertAdjacentHTML("beforeend", '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>')
  })
  .editable();

$("#list").on("click", ".editable-delete", function() {
  console.log('delete')
});

Ideally, in my own applications I'd prefer to have the buttons be added before the popup is shown but I don't see a way to do this with the public API of the library as it exists now. At any rate, with the reflow optimizations performed by browsers these days I doubt that adding the button in the shown handler visibly affect user experience.

Here's a modified fiddle: https://jsfiddle.net/kuqjtdar/3/