How to bulk delete the content of all divs with a given class

Question

I have a fixed class "div" that is present in all my HTML files on Visual Studio Code. The contents of these divs also contain different things. I want to bulk replace and delete these divs. Is there a way to do this?

<div class="WinOLS__detail-right WinOLS__detail-right--logged-out">
    <span class="WinOLS__purchase-intro">File:<br>Paneli Tavuk Tarif</span>
    <span class="WinOLS__purchase-credits">2.5 kredi</span>
    <div class="Notice Notice--neutral">
        <div>
            Please <a href="../../account/tr/......." title="Login">login</a>
            or <a href="../../hesap/tr/kayit.html" title="Bir Hesap Oluştur">Bir Hesap Oluştur</a>
            bu dosyaya sahip olmak istiyorsan
        </div>
    </div>
</div>

I want to delete all divs that have class "WinOLS__detail-right WinOLS__detail-right--logged-out" as seen above. I can't using find and replace. Because there are different contents in the Div. All the divs I want to change have the same class but different content. I want to delete all divs with the same class along with their content.

I want to replace the entire div content, but when I search for it by code, no results are found.

<div class="WinOLS__detail-right WinOLS__detail-right--logged-out">.+?</div>

or

<div class="WinOLS__detail-right WinOLS__detail-right--logged-out">(.+?)</div>

That's not working : Find and Replace

You can try Find and Replace with Regular Expressions. Look at this post [link](https://stackoverflow.com/questions/43577528/visual-studio-code-search-and-replace-with-regular-expressions) — Benjamhw, Apr 01 '23 at 09:09

score 0 · Answer 1 · answered Apr 01 '23 at 12:42

You can implement it with a selection of extensions:

What you need is a parser that knows HTML. VSC has one called Emmet.

The command to use is Emmet: Balance (outward)

open the file
go to the top of the file
search for the particular div
Emmet: Balance (outward)
delete selection

Add this to your settings.json (Global or Workspace)

  "multiCommand.commands": [
    {
      "command": "multiCommand.delete-WinOLS-detail",
      "sequence": [
        "cursorTop",
        { "command": "moveby.regex",
          "args": {
            "regex": "<div class=\"WinOLS__detail-right WinOLS__detail-right--logged-out\"",
            "properties": ["next", "end"],
            "checkCurrent": true
          }
        },
        "editor.emmet.action.balanceOut",
        "deleteRight"
      ]
    }
  ],
  "commandOnAllFiles.commands": {
    "delete-WinOLS-detail": {
      "command": "multiCommand.delete-WinOLS-detail",
      "includeFileExtensions": [".html"],
      "includeFolders": ["/win-ols/"],
      "label": "Delete div.WinOLS-detail"
    }
  }

AFAIK there is no conditional execution of commands.

The files must have the div you search for otherwise the whole html file is cleared. With grep you can get file names of files containing the div, move these files to a separate folder and apply the command on this folder.

Or copy the whole folder tree, remove the files that do not have the div, apply the command on the folder tree copy, move the processed files back to the original location. All be done with a few terminal (bash) commands.

In my test setup I had put the html files in the folder win-ols. Change the directory or delete the property includeFolders if you want all html files in the workspace to be processed.

moveby.regex is multi cursor aware, but the cursorTop command will collapse all cursors into 1 at the top. So only the first div will be found.

In Command Palette execute command Apply 1 or more commands to all files in the Workspace
Select: Delete div.WinOLS-detail
Watch each file loaded and div removed

You might be left with an empty line, you can add additional commands depending if all files are identical around this removed div.

Example Class: Notice Notice--neutral Please help me understand. Links inside all divs with this class are different. That's why I can't use find and replace. All 3000 files have the same div and same class. But the links they contain are different. How do I go about deleting all of these divs at once? — Home, Apr 01 '23 at 12:52
@Home Have you tried my answer on a few files in a test workspace, install the extensions, add some to `settings.json`, perform the steps in the last 3 bullets. — rioV8, Apr 01 '23 at 13:25
@Home You are not using find/replace, you do find-balance_outward-delete — rioV8, Apr 01 '23 at 13:26
@Home What is your comment different from the OP, div has same class but different inner HTML — rioV8, Apr 01 '23 at 13:55

score 0 · Answer 2 · answered Apr 20 '23 at 23:54

You can try using this extension, Find and Transform (that I wrote). It will NOT work across files but is VERY EASY to set up. Make this keybinding (in your keybindings.json):

{
  "key": "alt+g",        // whatever keybinding you want
  "command": "findInCurrentFile",
  "args": {
    "find": "class=\"WinOLS__detail-right WinOLS__detail-right--logged-out\"",
    "postCommands": [
      "editor.emmet.action.balanceOut",
      "expandLineSelection",   // just to include the newline at the end of each selected div
      "deleteRight"
    ]
  }
}

It could probably be worked into the Command On All Files extension if you wanted it to work on across files.

How to bulk delete the content of all divs with a given class

2 Answers2