Javascript-为DOM创建的元素创建切换函数

我有一个按钮“-”，当点击时，它会在我的“书”的角落创建一个“X”按钮来删除它们。有没有办法使我再次点击“-”按钮时，它在隐藏和显示“书籍”角落的“X”按钮之间切换

请不要使用JQuery，仍然没有学会如何使用它

这是我的HTML：

<div class="container">
<div class="book-display">
  <div class="title">Title:</div>
  <div class="author">Author:</div>
  <div class="pages">Pages:</div>
  <div class="read">Have Read:</div>
</div>
<div class="shelf"></div>
<div class="buttons">
  <button class="button" id="delete">➖</button>
  <button class="button" id="add">➕</button>
</div>

标题：
作者：
页：
已阅读：
➖
➕

下面是我的Javascript：

 //Add Books to Shelf Display
function addBookToShelf() {
    for (let i = 0; i < myLibrary.length; i++) {
        const books = document.createElement('div');
        books.classList.add('books');
        books.setAttribute('id', myLibrary[i].title)
        if (myLibrary[i].read === "Not Read") {
            books.style.background = "rgba(71, 22, 10, 0.664)"
        };
        if (myLibrary[i].read === "Partially Read") {
            books.style.background = "rgba(199, 199, 58, 0.575)"
        }
        const booksText = document.createElement('div');
        booksText.classList.add('book-text')
        booksText.addEventListener('click', () => {
            bookTitleEl.innerHTML = "Title: " + myLibrary[i].title;
            bookAuthorEl.innerHTML = "Author: " + myLibrary[i].author;
            bookPagesEl.innerHTML = "Pages: " + myLibrary[i].pages;
            bookReadEl.innerHTML = "Have Read: " + myLibrary[i].read;
        });
        booksText.innerHTML = myLibrary[i].title;
        shelfEl.appendChild(books);
        books.appendChild(booksText);
        document.getElementById(myLibrary[i].title).setAttribute('value', 1);

        

//Add delete button to books function
function deleteXButton() {
    const deleteXEl = document.createElement('button');
    deleteXEl.classList.add('deleteX');
    books.appendChild(deleteXEl);
    
    deleteXEl.innerHTML = "X"
    document.getElementsByClassName('deleteX');
    if (document.getElementsByClassName('deleteX').length > myLibrary.length) {
    deleteXEl.remove();
    }
    if (deleteXEl.style.display === "block") {
        deleteXEl.style.display = "none";
      } else {
        deleteXEl.style.display = "block";
      }
    //Delete Book from Shelf & Object from Libray Array
    deleteXEl.addEventListener('click', () => {
        const bookIndex = myLibrary.indexOf(myLibrary[i])
        books.remove(delete myLibrary[bookIndex]);
        noBookFound();
    });
}

        //DELETE BUTTON EVENT LISTENER   
         deleteButtonEl.addEventListener('click', () => {
                deleteXButton();
        });
        }
      };

//将书籍添加到书架显示
函数addBookToSelf（）{
for（设i=0；i{
booktilel.innerHTML=“Title:+myLibrary[i]。Title；
bookAuthorEl.innerHTML=“作者：”+myLibrary[i]。作者；
bookPagesEl.innerHTML=“页面：”+myLibrary[i]。页面；
bookReadEl.innerHTML=“Have Read:”+myLibrary[i].Read；
});
booksText.innerHTML=myLibrary[i]。标题；
shelfEl.儿童（书籍）；
书籍。附加儿童（书籍文本）；
document.getElementById（myLibrary[i].title）.setAttribute（'value'，1）；
//添加删除按钮到图书功能
函数deleteXButton（）{
const deleteXEl=document.createElement（'button'）；
deleteXEl.classList.add（'deleteX'）；
books.appendChild（deleteXEl）；
deleteXEl.innerHTML=“X”
document.getElementsByClassName（'deleteX'）；
if（document.getElementsByClassName（'deleteX'）.length>myLibrary.length）{
deleteXEl.remove（）；
}
如果（deleteXEl.style.display==“块”）{
deleteXEl.style.display=“无”；
}否则{
deleteXEl.style.display=“块”；
}
//从书架上删除书籍&从库数组中删除对象
deleteXEl.addEventListener（'单击'，（）=>{
const bookIndex=myLibrary.indexOf（myLibrary[i]）
删除（删除myLibrary[bookIndex]）；
noBookFound（）；
});
}
//删除按钮事件侦听器
DeleteButtonnel.addEventListener（'单击'，（）=>{
deleteXButton（）；
});
}
};

任何和所有的帮助都将不胜感激

有一个切换方法，我们可以使用该方法切换样式。如果您包含一个从DOM中删除元素的类（与

display:none

），这将成为隐藏/显示元素以响应用户操作的简单方法。您可以在代码段中的

切换删除按钮
函数中看到这是如何工作的

我对您的代码做了一系列的其他建议修改，您可以按单点的方式自由选择。顺便说一句，上面的链接指向MDN，这是一个搜索任何不熟悉的web开发术语的好网站（例如，您只需通过google“MDN findIndex”了解数组的
findIndex
方法）


//全局标识某些DOM元素
常数
deleteBooksButton=document.getElementById（“删除”），
addBookButton=document.getElementById（“add”），
shelfEl=document.getElementsByClassName（“shelf”）[0]，
deleteButtons=document.getElementsByClassName（“删除按钮”）；
//全局声明库，并用示例书填充它
让图书馆；
库=getSampleLibrary（库）；
AddBooksToSelf（图书馆）；
//单击deleteBooksButton时调用toggleDeleteButtons
deleteBooksButton.addEventListener（“单击”，切换DeleteButtons）；
//单击工具架内的任何内容时调用deleteBook
shelfEl.addEventListener（“单击”，删除书本）；
//定义显示/隐藏所有删除按钮的函数
函数toggleDeleteButtons（）{
for（删除按钮中的let按钮）{
按钮。类列表。切换（“隐藏”）；
}
}
//定义删除书本的函数（单击事件气泡直至“书架”）
函数deleteBook（事件）{
//在继续之前，确保单击事件位于删除按钮上
const clickedThing=event.target；
如果（！clickedThing.classList.contains（“删除按钮”）{return；}
//在DOM树中向上搜索bookEl，然后向下搜索标题
常数
bookEl=单击内容最近（“.book”），
title=bookEl.querySelector（“.title”）.textContent；
//从DOM树中删除bookEl
bookEl.remove（）；
//在库数组中查找具有匹配标题属性的图书对象
const libraryIndex=library.findIndex（book=>book.title==title）；
//如果存在匹配项，则从库中删除图书对象
如果（库索引>-1）{
库.拼接（库索引，1）；
}
}
//定义函数以使用书籍相关元素填充工具架的DOM树
函数addBooksToSelf（库）{
//循环库数组的元素（将每个元素称为“book”）
为（让图书馆的书）{
//使用“解构”将局部变量绑定到书本的道具
const{title，author，pages，read}=书；
//创建bookEl及其子体
//bookEl将有3个子项：deleteDiv、teaserEl和detailsEl
//deleteDiv将有一个子项：deleteButton
//detailsEl将有4个div子项（标题、作者、页面和阅读）
//（detailsEl内的4个div将各有1个跨度子级）
常数
bookEl=document.createElement（“div”），//将具有类：“book”
deleteDiv=document.createElement（“div”），//…“delete div”
Triaserel=document.createElement（“div”），//…“Triaser”
detailsEl=document.createElement（“div”），//…“text”