Who would help me solving this problem ? The problem is, my question and answer to disappear after the door is open,but how ?

Question

https://code.sololearn.com/W8P4P5D95cR1/?ref=app

Answer 1

You could try something like this:
// <![CDATA[
function open1(){
var dor = document.getElementById("dose1");
dor.style.transform = "rotateY(85deg)";
dor.style.transition = "5s";
dor.style.marginLeft = "-40%";

// hide question and answer after 5 seconds.
setTimeout(hideQuestionAnswer, 5000);
}

function hideQuestionAnswer(){
var questionAnswerElements = document.querySelectorAll('body > p, body > mark');
questionAnswerElements.forEach(function(e) {
e.remove();
});
}

// ]]>

I added the CDATA comments because the < and > are invalid in HTML text nodes such as the JavaScript snippet. It'll work without the CDATA comments but it won't pass validation and the browser will start using quirks mode.

You could call hideQuestionAnswer immediately if you want it removed immediately. I just wasn't sure when you wanted that to happen.

It would be simpler if you wrap your question and answer elements with a single div and set a descriptive id such as "question-answer" on it. This way, the hideQuestionAnswer function's code can be as simple as:
function hideQuestionAnswer(){
document.getElementById('question-answer').remove();
}

Answer 2

Use Css opacity..I think it may help u✌🏻

Answer 3

Ok .Thank you 🙏🏻

Answer 4

Josh Greig i did it but there is no result , something is going wrong with my code , would you help me please ?

Answer 5

You have 2 open functions. Did you test with open2 instead of open1? open2 corresponds with the blue door.

If you want the question and answer to close whenever either door opens, make sure this line is in both the open1 and open2 functions:
setTimeout(hideQuestionAnswer, 5000);