Tampermonkey script to remove a division and make other divisions auto-align

Question

I’m new to JS & HTML, and I’m trying to tamper a website with tamper monkey.

It won’t work without an account so I can’t give you the link to it, but it is just like Twitter.

I managed to remove certain divisions (just like certain tweets in Twitter), giving a list of IDs, with the following script:

// ==UserScript==
// @name         test
// @namespace    http://tampermonkey.net/test
// @version      0.1
// @description  test
// @author       test
// @match        https://test.com/*
// @grant        GM_log
// @require      https://code.jquery.com/jquery-latest.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==

/* globals jQuery, $, waitForKeyElements */

(function() {
    'use strict';

    const black_list = ['id1', 'id2'];
    waitForKeyElements(".vue-recycle-scroller__item-view", function() {
        remove_test(black_list);
    });
})();

function remove_test(black_list) {
    const feeds = document.querySelectorAll('.vue-recycle-scroller__item-view').forEach(e => {
        const htmlString = e.outerHTML;
        if (isIdInHTML(htmlString, black_list, true)) {
            e.remove();
        }
    });
}

function isIdInHTML(targetString, idsArray, verbose = false) {
    for (const id of idsArray) {
        const substring = `<span title="${id}">${id}</span>`;;
        if (targetString.includes(substring)) {
            if (verbose) {
                GM_log(`Removing: ${id}`);
            }
            return true
        }
    }
    return false
}

It works, but the removed divisions will leave blanks in the column.

I tried to maunally remove divisions in Twitter, and I noticed that Twitter’s tweets HTML looks like this:

<div style="position: relative; min-height: 10169px;">
<div data-testid="cellInnerDiv" style="transform: translateY(0px); position: absolute; width: 100%;">...</div>
<div data-testid="cellInnerDiv" style="transform: translateY(119px); position: absolute; width: 100%;">...</div>
<div data-testid="cellInnerDiv" style="transform: translateY(520px); position: absolute; width: 100%;">...</div>
...
</div>

… and after I tried to delete a certain <div data-testid="cellInnerDiv"..., all tweets’ translateY will change automatically, and so that they can automatically go top to fill the blanks left by the deleted division.

And the website I’m working on doesn’t have this feature — translateYs will remain the same after I delete some divisions manually. I suspect this is the reason why there will be blanks after my script deletes some divisions.

The website I’m working on looks like:

<div class="vue-recycle-scroller__item-wrapper" style="min-height: 8234px;">
<div class="vue-recycle-scroller__item-view" style="transform: translateY(0px);">...</div>
<div class="vue-recycle-scroller__item-view" style="transform: translateY(506px);">...</div>
<div class="vue-recycle-scroller__item-view" style="transform: translateY(1010px);">...</div>
...
</div>

Is there any way to remove certain divisions with tampermonkey script, and make other divions auto-align to the top, like twitter does?

Leave a Comment Cancel reply