如何在 VS Code 中选择和删除 HTML 元素(其标签和内容)?

问题描述 投票:0回答:4

首先,有一个“Emmet:删除标签”功能,但只能删除特定标签的包装。它不会删除整个元素,包括其中的子元素。

我正在寻找同样的处决,也可以删除孩子们。为那些经常编辑 HTML 的人节省几秒钟的时间。

在下面的示例中,我想使用 emmet 或类似命令删除整个

<ul>
元素。

<!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>
html visual-studio-code emmet
4个回答
1
投票
  • 将光标放在
    <ul>
    </ul>
  • 执行命令:Emmet:平衡向外
  • Delete

如果您经常需要这个,您可以为命令添加键绑定Emmet:向外平衡

如果将光标放在

<ul>...</ul>
标签内的任意位置,您可以通过多次应用命令/键绑定来选择
<ul>...</ul>
标签。

这也适用于多光标


0
投票

注意:我认为rioV8的答案(在我之后发布)更好。如果有人感兴趣的话,我就把我的留在这里。

将插入符号放在开始标签的

>
之后,然后运行
Expand Selection
命令两次(默认绑定到 shift+alt+right),这应该将选择范围扩展到元素标签和内容,然后按删除键或退格键。从技术上讲,您可以将光标放在元素源标记的任何部分,但您只需多次扩展选择即可。


0
投票

不幸的是,“Emmet:删除标签”功能仅删除特定标签的包装,而不会删除整个元素(包括其中的子元素)。您可以使用其他方法来实现此目的。例如,您可以使用文本编辑器中的“查找和替换”功能来查找要删除的整个元素并将其替换为空字符串。或者,您可以使用提供此功能的其他扩展或工具。


0
投票

基于:@starball 回答

使用“首选项:打开键盘快捷键 (JSON)”命令从命令面板 (Ctrl+Shift+P) 打开 keybindings.json 文件。

然后将其添加到 json 文件中:

{
    "command": "runCommands",
    "key": "shift+alt+right", // whatever keybinding
    "args": {
        "commands": [
            "editor.action.smartSelect.expand",
            "editor.action.smartSelect.expand"
        ]
    }
}

现在按

Shift
+
Alt
+
Right
Expand Selection
运行两次,你就可以做你想做的事情

注意:您可以使用任何您想要的键绑定来编辑键绑定

© www.soinside.com 2019 - 2024. All rights reserved.