I want to change remove a certain tag with an id in the html page, eg.<div id="theid"><p>sometext</p></div>
Is there any ways to do it with react js? I know I can do it with javascript by document.getElementById("theid").remove();, how can I do it in the react way? I don't need a button or anything, just simply remove it when the page loads. I'd prefer methods without importing any modules or libraries if possible. Thank you.
Add a comment
|
2 Answers
You should likely use a ref:
https://reactjs.org/docs/refs-and-the-dom.html
So you attach the ref to the DOM element, then you can imperatively remove that element just like you specified.
So in the component function body:
const myRef = useRef();
Then in the component render:
<Component ref={myRef} />
Then you can use the code in your question to remove the element from the DOM.
ref.remove();
If you need to do it when the page loads look at using useEffect to achieve this. Although if you're removing an element on page load, I question why you even need the element there in the first place ;).
8 Comments
Zaydon Lim
thank you for you insight, as for why I need it in the first place, it is something that is generated from another js file, and is needed by other webpages, so I can't just remove it from my source code.
John McAulay
Right thanks for the clarification, it sounds like what are you doing is best then. If you can't add a ref to the element then I think what you're doing inside a useEffect with an empty dependency array is your best bet. useEffect(() => {document.getElementById("theid").remove();},[]) Or something like that, let me know if you want a JS fiddle or anything like that.
John McAulay
reactjs.org/docs/hooks-effect.html You'll want to use the empty dependency array ([]) so that it only fires on component load (once).
Zaydon Lim
I'd appreciate it if you are willing to make a jsfiddle, I'm totally new to react js.
John McAulay
Working on it :).
|
If it's rendered as part of React, the right way to do it would be to simply omit it from the source code:
const App = () => (
<div>
<div id="theid">foo</div>
<div>more content</div>
</div>
);
to
const App = () => (
<div>
<div>more content</div>
</div>
);
If it's not part of React, then remove it from whatever process generates the HTML.
If that's not an option - if it must be part of the HTML served to the client and it's not rendered as part of React - then you'll have to resort to doing what you're currently doing:
document.getElementById("theid").remove();
probably completely separate from your React script, since it's something you want to do only once, when the page loads, and not something that needs to be a part of the React lifecycles.
answered Feb 22, 2022 at 1:21
CertainPerformance
373k55 gold badges354 silver badges359 bronze badges
3 Comments
Zaydon Lim
it is something that is generated from another js file, and is needed by other webpages, so I can't just remove it from my source code.
CertainPerformance
The best approach would be to refactor that other file so that it only creates the element on pages that it needs to be on, instead of everywhere.
Zaydon Lim
yes I had also thought about that approach actually, but in fact I only have one and only one webpage which needs removing the element, so I thought it might be easier by removing it with js.