Javascript 关闭打开的元素并显示新单击的元素

对不起，我不知道该怎么解释，但我会试试的

我确实有一个div#email显示屏，显示新页面上收到的电子邮件的相关信息。 在这里之前，它可以正常工作，但是当我返回页面而不刷新页面并单击打开另一封电子邮件时，它会显示同一分区中的两封电子邮件旧的打开的和我刚刚打开的，我怎么能在页面中一次只打开并显示一封

是否可以重置电子邮件显示Div中所有附加的Div，然后仅显示新附加的Div

然后，要加载邮箱的函数在单击时引用另一个函数

function load_mailbox(mailbox) {
  
  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#email-display').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'none';
    fetch(`/emails/${mailbox}`) // url with that API
    .then(response => response.json())
    .then(emails => {
        // Print emails
        console.log(emails); // all emails as objects
        // Loop and show all the emails in that mailbox.
        emails.forEach(function(email) { // loop to loop over each object
            const element = document.createElement('div'); // make new div element for each object (email)
              if (email.read == false){
                element.style.background = 'white';
              }else{
                element.style.background = 'gray';
              }
              element.classList.add('element');
              element.innerHTML = email.sender + email.subject + email.timestamp
              document.querySelector('#emails-view').append(element);
              element.addEventListener('click', function() {
                display_email(email) ****# here it goes to open the email in new page.****
              });
        });
    });
  // Show the mailbox name
  document.querySelector('#emails-view').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;
}

功能加载\u邮箱（邮箱）{
//显示邮箱并隐藏其他视图
document.querySelector（“#电子邮件视图”）.style.display='block'；
document.querySelector（“#电子邮件显示”）.style.display='none'；
document.querySelector（“#撰写视图”）.style.display='none'；
使用该API获取（`/emails/${mailbox}`）//url
.then（response=>response.json（））
。然后（电子邮件=>{
//打印电子邮件
console.log（电子邮件）；//所有电子邮件都作为对象
//循环并显示该邮箱中的所有电子邮件。
forEach（函数（email）{//在每个对象上循环
const element=document.createElement（'div'）；//为每个对象（电子邮件）创建新的div元素
如果（email.read==false）{
element.style.background='white'；
}否则{
element.style.background='gray'；
}
element.classList.add（'element'）；
element.innerHTML=email.sender+email.subject+email.timestamp
document.querySelector（“#emails view”）.append（元素）；
元素。addEventListener（'click'，function（）{
显示电子邮件（电子邮件）****#此处将在新页面中打开电子邮件****
});
});
});
//显示邮箱名称
document.querySelector（“#emails view”）.innerHTML=`${mailbox.charAt（0.toUpperCase（）+mailbox.slice（1）}`；
}

一个函数，用于打开包含单击的电子邮件的新页面

function display_email(email_to_open){
    document.querySelector('#email-display').style.display = 'block';
    document.querySelector('#emails-view').style.display = 'none';
    document.querySelector('#compose-view').style.display = 'none';
    fetch(`/emails/${email_to_open.id}`)
      .then(response => response.json())
      .then(email_to_open => {
        // Print email
        console.log(email_to_open);

        // show the email clicked on page.
        const email_from = document.createElement('div');
        const email_to = document.createElement('div');
        const email_subject = document.createElement('div');
        const email_timestamp = document.createElement('div');
        const email_body = document.createElement('div');
        const archive_button = document.createElement('div');

        email_from.innerHTML = 'From: ' + email_to_open.sender
        email_to.innerHTML =    'To: ' + email_to_open.recipients
        email_subject.innerHTML ='Subject: ' +  email_to_open.subject
        email_timestamp.innerHTML = 'Timestamp: ' +email_to_open.timestamp
        email_body.innerHTML = email_to_open.body

        document.querySelector('#email-display').appendChild(email_from)
        document.querySelector('#email-display').appendChild(email_to)
        document.querySelector('#email-display').appendChild(email_subject)
        document.querySelector('#email-display').appendChild(email_timestamp)
        document.querySelector('#email-display').appendChild(email_body)

        if (email_to_open.archived == false){
            archive_button.innerHTML = `<button class="Archive">Archive</button>`
        }
        else{
            archive_button.innerHTML = `<button class="UnArchive">UnArchive</button>`
        }
        archive_button.addEventListener('click', function() {
            if (archive_button.innerHTML == `<button class="Archive">Archive</button>`) {
                fetch(`/emails/${email_to_open.id}`, {
                  method: 'PUT',
                  body: JSON.stringify({
                      archived: true
                  })
                })
                archive_button.innerHTML = `<button class="UnArchive">UnArchive</button>`
            }else{
                fetch(`/emails/${email_to_open.id}`, {
                  method: 'PUT',
                  body: JSON.stringify({
                      archived: false
                  })
                })
                archive_button.innerHTML = `<button class="Archive">Archive</button>`
            }
        });
            document.querySelector('#email-display').appendChild(archive_button)
        });
        // and mark email as read.
        fetch(`/emails/${email_to_open.id}`, {
          method: 'PUT',
          body: JSON.stringify({
          read: true
            })
        })
}

功能显示电子邮件（电子邮件打开）{
document.querySelector（“#电子邮件显示”）.style.display='block'；
document.querySelector（'#emails view'）.style.display='none'；
document.querySelector（“#撰写视图”）.style.display='none'；
获取（`/emails/${email\u to\u open.id}`）
.then（response=>response.json（））
。然后（通过电子邮件发送至打开=>{
//打印电子邮件
console.log（通过电子邮件发送至打开）；
//显示在页面上单击的电子邮件。
const email_from=document.createElement（'div'）；
const email_to=document.createElement（'div'）；
const email_subject=document.createElement（'div'）；
const email_timestamp=document.createElement（'div'）；
const email_body=document.createElement（'div'）；
const archive_button=document.createElement（'div'）；
email_from.innerHTML='from:'+email_to_open.sender
email_to.innerHTML='to:'+email_to_open.recipients
email_subject.innerHTML='subject:'+将电子邮件发送至_open.subject
email_timestamp.innerHTML='timestamp:'+email_to_open.timestamp
email\u body.innerHTML=将电子邮件发送到\u open.body
document.querySelector（“#电子邮件显示”）.appendChild（电子邮件从）
document.querySelector（“#电子邮件显示”）.appendChild（电子邮件地址）
document.querySelector（“#电子邮件显示”）.appendChild（电子邮件主题）
document.querySelector（“#电子邮件显示”）.appendChild（电子邮件时间戳）
document.querySelector（“#电子邮件显示”）.appendChild（电子邮件正文）
如果（通过电子邮件发送到open.archived==false）{
archive_button.innerHTML=`archive`
}
否则{
archive_button.innerHTML=`UnArchive`
}
存档按钮。addEventListener（'单击'，函数（）{
如果（archive_button.innerHTML==`archive`）{
获取（`/emails/${email\u to\u open.id}`{
方法：'放'，
正文：JSON.stringify({
存档：对
})
})
archive_button.innerHTML=`UnArchive`
}否则{
获取（`/emails/${email\u to\u open.id}`{
方法：'放'，
正文：JSON.stringify({
存档：错误
})
})
archive_button.innerHTML=`archive`
}
});
document.querySelector（“#电子邮件显示”）.appendChild（存档按钮）
});
//并将电子邮件标记为已读。
获取（`/emails/${email\u to\u open.id}`{
方法：'放'，
正文：JSON.stringify({
读：对
})
})
}

HTML

只需用

document.querySelector('#emails-view').innerHTML = "";

或者不必每次都创建和追加一个新的

DIV

，只需将数据直接插入

#emails view

document.querySelector('#emails-view').innerHTML = "";