htmlvisual-studio-codeemmet

How can I select and remove an HTML element (its tags and content) in VS Code?

First of all, there is an "Emmet: Remove Tag" feature, but that only removes the wrapping of particular tags. It doesn't remove the entire element including the children within.

I'm looking for the same execution which removes the children as well. Saves a few seconds for those who edit HTML a lot.

In the example below, I want to remove the whole <ul> element by using an emmet or similar command.

<!DOCTYPE html>
<html>
<head>
    <title>My Dummy HTML Snippet</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a dummy HTML snippet with nested tags.</p>
    <div>
        <h2>A Nested Section</h2>
        <p>This is a paragraph inside a div element.</p>
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>
    <p>Back to the main content.</p>
</body>
</html>
Solution

  • If you need this a lot you can add a keybinding for the command Emmet: Balance Outward

    If you place the cursor anywhere inside the <ul>...</ul> tag you can select the <ul>...</ul> tag by applying the command/keybinding multiple times.

    This also works with Multi Cursor.