Element inside an Element Emmet

Question

How to do this Emmet format in VS Code?

<ul id="list-items">
  <li class="items">Items 1<button class="delete-btn">X</button></li>
  <li class="items">Items 2<button class="delete-btn">X</button></li>
  <li class="items">Items 3<button class="delete-btn">X</button></li>
  <li class="items">Items 4<button class="delete-btn">X</button></li>
</ul>

I've been trying to get the formula for this Emmet. I cant seem to declare a button inside a curly bracket(Text)

This Emmet
ul#list-items>(li.items{Items $}+button.delete-btn{X})*4

Produces this one. Close but not quite;

<ul id="list-items">
 <li class="items">Items 1</li>
 <button class="delete-btn">X</button>
 <li class="items">Items 2</li>
 <button class="delete-btn">X</button>
 <li class="items">Items 3</li>
 <button class="delete-btn">X</button>
 <li class="items">Items 4</li>
 <button class="delete-btn">X</button>
</ul>

and if I ever try to declare a button inside a curly bracket

ul#list-items>li.items{Items $ button.delete-btn }*4

ul#list-items>li.items{Items $ + button.delete-btn{X}}*4

ul#list-items>li.items{Items $ ^button.delete-btn{X}}*4

also tried;

ul#list-items>(li.items{Items $ button.delete-btn})*4

this is the thing that I produce:

<ul id="list-items">
 <li class="items">Items 1 button.delete-btn </li>
 <li class="items">Items 2 button.delete-btn </li>
 <li class="items">Items 3 button.delete-btn </li>
 <li class="items">Items 4 button.delete-btn </li>
</ul>

I removed the {X} on the Button since it doesn't execute if there is.

Also tried this

ul#list-items>li.items{Items $ (button.delete-btn{X})}*4

but can't execute. Even if I remove {X} on button.

Answer 1

Try this:

ul#list-items>(li.items{Items $}>button.delete-btn{X})*4