How to remove HTML element from DOM with React

Question

I have a loader set up in a div that I want to remove once a certain component is loaded by react. This div exists in my index.html file out side of my components. The code for my div is:

<div class="loaderBackground">
   <div class="loader"></div>
</div>

I've tried using refs, but everything I have found seems to imply that the element would need to be in a component, which I would like to avoid.

Is it possible to remove the element without putting it in a component or do I have to fit in my components somewhere?

To do it from react find element using document.get....().style.display = none; — Aykhan
– Aykhan, Commented Nov 8, 2019 at 15:01

Smail Galijasevic · Accepted Answer · 2019-11-08 15:09:02Z

5

I would strongly discourage using document.querySelector().. rather I would you React refs or state as said in the second answer but I would use conditional rendering as it doesn't impact styles which might have different states depending on other stuff

  this.setState({ hide: true });


  <div class="loaderBackground">
       {!hide && <div class="loader"></div>}
  </div>

answered Nov 8, 2019 at 15:09

Smail Galijasevic

8035 silver badges16 bronze badges

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

2 Comments

Andrew Over a year ago

I get the impression they're talking about a loader that's outside of the react app scope. With that said, I agree, they should probably put it inside of the react scope and do it this way. But it seems they explicitly don't want to do that.

Smail Galijasevic Over a year ago

Reading the question again I agree, still as you said I think it would be better to move it inside react scope and avoid using slow DOM API as it negates React performance features

Andrew · Accepted Answer · 2019-11-08 15:28:16Z

2

componentDidMount() should be a good place to put your logic.

var element = document.querySelector('.loader');
element.parentNode.removeChild(element);

// or

element.style.display = 'none';

edited Nov 8, 2019 at 15:28

Andrew

7767 silver badges22 bronze badges

answered Nov 8, 2019 at 15:04

Jay Jordan

7434 silver badges17 bronze badges

4 Comments

Aziz.G Over a year ago

there is no OnComponentDidMount as life cycle methods in react.

Andrew Over a year ago

@G.aziz it's componentDidMount. I tried to edit this answer with that fixed but it isn't accepted yet.

Aziz.G Over a year ago

i approved sorry i didn't see it

Jay Jordan Over a year ago

Thanks guys. Didn't see that.

Aziz.G · Accepted Answer · 2022-01-17 17:50:03Z

2

I propse to add a state that change to true after the loading to control the display of your DOM.

Example:

this.setState({ hide: true });

<div class="loaderBackground">
       <div class="loader" style={{display: hide? "none":"block"}}></div>
</div>

edited Jan 17, 2022 at 17:50

answered Nov 8, 2019 at 15:02

Aziz.G

3,7913 gold badges21 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to remove HTML element from DOM with React

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related