Is there a quick way to delete an HTML tag pair in vscode?

Question

For example, before:

<div>
    <div>Titles</div>
    <div>Description</div>
</div>

After:

    <div>Titles</div>
    <div>Description</div>

score 78 · Accepted Answer · answered Mar 17 '18 at 20:13

78

Use the Emmet: Remove Tag command:

Setup a keybinding for this with editor.emmet.action.removeTag:

{
    "key": "ctrl+shift+k",
    "command": "editor.emmet.action.removeTag"
}

answered Mar 17 '18 at 20:13

Matt Bierner

58,117
21
175
206

16

how to remove the content too? – NamNamNam Jul 11 '18 at 08:06
16

@NamNamNam If you want to remove the content too, use `Emmet: Balance (outwards)` to select the tag and content and then press backspace to remove it. – Alfred Sep 29 '19 at 21:25
@mattbierner Dumb question, but where is the file located where you enter the setting snippet? (windows) – Kirk Ross Feb 20 '20 at 05:29
1

I was so hoping VS Code would have that, and it does, thank you so much! – Liran H May 26 '20 at 14:25
This is extremly convenient . Thanks so much! – Cyrill May 17 '21 at 10:33
I can't believe how much time i've wasted finding missing ends of tags :( – nmu Sep 28 '21 at 10:17
Is there a way this could be applied in search and replace all? like recently in [bootstrap5](https://getbootstrap.com/docs/5.0/migration/#forms) removed `input-group-append` & `input-group-prepend` classes. It would be handy to remove all divs contain those classes. Find All & Emmet? – akd Aug 22 '22 at 10:59
This does not work for react fragments (`<>` .... `>`) – IcyIcicle Aug 10 '23 at 23:11

score 2 · Answer 2 · answered Dec 02 '21 at 19:23

Just a note that there is an improvement in vscode v1.63 to also (as the OP requested) remove the lines on which the removed tags reside. It works now in the Insiders Build. See

Emmet Remove Tag command improvement

The "Emmet: Remove Tag" command now removes empty lines around tags if they are the only tags on the line. It also now does not take into account empty lines when calculating the amount to reindent the lines.

See release notes: emmet remove tag improvements

<div>                   <- this entire line will be removed sonce only the tag on the line
    <div>Titles</div>
    <div>Description</div>
</div>                  <- this entire line will be removed

Is there a quick way to delete an HTML tag pair in vscode?

2 Answers2

Emmet Remove Tag command improvement

Linked