Question 43223 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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"
    ]
  }
}

    delete div with matching class demo

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search