Cannot .remove() element

OakleyHippo

Hi again Flarumites!

I've come across an issue while working on Extum Material. I cannot seem to use $('.elementName').remove() to remove an element. Following is the code that I have so far and tried. extum-material2 is being used since then it'll be weird and pull from Packagist.

app.initializers.add('extum-material2', () => {
    app.extensionSettings['extum-material2'] = () => { app.modal.show(new ExtumSettingsModal()) };
    
    extend(ExtensionsPage.prototype, 'view', (view) => {
        // $('.ExtensionListItem-title>input').remove(); <= Does not work so it's commented out
        // This doesn't either => $('.ExtensionListItem-title').prepend(`
            replaceWithMyHTML
        `);
        // But this does 🤔 => console.log('Hi');
	});
});

OakleyHippo

I have this now:

app.initializers.add('extum-material2', () => {
    extend(ExtensionsPage.prototype, 'view', (view) => {
        $('.ExtensionListItem-title>input').remove();
        $('.ExtensionListItem-title').html(`
            <label class="extum-checkbox">
                <input type="checkbox">
                <span>${$(this).html()}</span>
            </label>
        `);
        console.log('Hi');
    });

    app.extensionSettings['extum-material2'] = () => { app.modal.show(new ExtumSettingsModal()) };
});

But it only works if I somehow update the contents of the page, like clicking on the Settings menu of an extension...

datitisev

OakleyHippo Elements when removed through jQuery will reappear when Mithril redraws its interface. You'll want to delete elements by changing the vnodes.

   extend(ExtensionsPage.prototype, 'view', (vnode) => {
        vnode.children // do stuff to this
    });

You can view examples of modifying elements in a few fof extensions, including fof/discussion-thumbnail, and fof/geoip.

You'd probably delete the element by finding its index and using .splice (I think?). The best way of finding how the vnode object looks is simply by logging it to the console with console.log(vnode); and at every step while you get deeper in the virtual DOM chain.

Hope this made sense. I know it's a bit confusing but it's the best way to do it.

OakleyHippo

datitisev It took me awhile, but I got it. Thanks alot!