Isolating element on webpage using jQuery

Question

I created a Firefox add-on for myself to view the button at http://www.reddit.com/r/thebutton. ~~All I want is for the button to be the only element shown.~~ All I want is for the button form to be the only form shown. This is the only way I could find to isolate the button using jQuery. I feel like its the wrong way to do it and was curious if there was a proper way.

$('#header').remove();
$('.side').remove();
$('.footer-parent').remove();
$('#siteTable').remove();
$('#progressIndicator').remove();
$('.debuginfo').remove();
$('section').remove();
$('.content').css({"margin" : "auto"});

Well if it's for yourself then as long as it works then it is good to go. You can also do .hide() on the elements and should produce the same result — Huangism
– Huangism, Commented May 6, 2015 at 19:55
I was just thinking if they added one extra section to the page I would have to go back and add a new hide line and it seems wrong to have to do that. — The_Guy
– The_Guy, Commented May 6, 2015 at 20:01

Huangism · Accepted Answer · 2015-05-06 20:08:37Z

1

You can do this

$('.thebutton-form').prependTo('body');
$('body').children().not('.thebutton-form').hide(); // or remove()

This will attach the button to the beginning of the document and hide or remove the rest of the stuff

This solution does not depend on the #header being there.

answered May 6, 2015 at 20:08

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

honerlawd · Accepted Answer · 2015-05-06 20:07:39Z

1

You could do something like this

$('body').prepend($('.thebutton-form'));
$('body').children(':not(.thebutton-form)').hide();

You could also use .remove();.

BTW not entirely sure if it is cross browser or not.

First line moves the form to be a direct child of the body. Second line hides / removes all other elements in the body that are not the form.

No idea why i used insertAfter instead of prepend /append but I fixed it.

edited May 6, 2015 at 20:07

answered May 6, 2015 at 20:01

honerlawd

1,50911 silver badges10 bronze badges

2 Comments

The_Guy Over a year ago

Actually, what you posted before $('.thebutton-form').insertBefore('#header'); $('body').children(':not(.thebutton-form)').hide(); worked but when I try this one all it does is have the words ".thebuttonform" in the panel.

honerlawd Over a year ago

Yea I forgot to do .prepend($('.thebutton-form'));. I corrected my solution

Collectives™ on Stack Overflow

Isolating element on webpage using jQuery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related