How does VIM's Ultisnips plugin handle delete inside of HTML snips? How do I change id to class in a div?

Question

I'm new to Ultisnips. In insert mode I type div [tab] then I get:

<div id="name">

</div>

With the cursor on name. If i wan't to use class instead of id I hit backspace and get this

<div>

</div>

With the cursor on the first v. Now if I want to start typing 'class' I end up with this

<diclassv>

</div>

If I delete class and hit [esc] l i 'class' I end up with this

<div id=" "class>

</div>

What's going on here? What am I doing wrong?

I want

<div class="foo">

</div>

Answer 1

I'm not finding a way to do what you're looking for either, at least with the standard snippet definitions.

I've created an improved snippet for that which you can start using by placing the following in ~/.vim/UltiSnips/html.snippets (my version of that file is available from GitHub):

clearsnippets div
snippet div "XHTML <div>"
<div`!p snip.rv=' id="' if t[1] else ""`${1:name}`!p snip.rv = '"' if t[1] else ""``!p snip.rv=' class="' if t[2] else ""`${2:name}`!p snip.rv = '"' if t[2] else ""`>
   $0
</div>
endsnippet

This will provide both id and class attributes by default, eliminating the one(s) where the value is deleted.

The official version of UltiSnips on GitHub now includes this version of the snippet.