输入框里输入图书名，按后面的添加图书按钮，会生成下面的图书列表，该列表后有一个删除按钮，点击会删掉本图书。 另外提示：会用到无序列表ul、数组运算的增加push和删除函数splice。

这是一个常见的前端网页功能实现，通常在JavaScript中操作DOM来完成这样的任务。用户可以在输入框中输入图书名称，然后点击“添加图书”按钮，新书名会被添加到HTML中的一个无序列表`<ul>`中，这个列表通常是通过JavaScript动态创建的，并使用`appendChild`方法插入到列表中。列表项可能是如下的HTML结构：

<ul id="bookList">
</ul>

当你调用`array.push()`函数，它会在数组的末尾添加新的元素，这里是图书名称。例如，如果数组表示用户输入的图书名：

let books = [];
function addBook(bookName) {
  books.push(bookName);
  const listItem = document.createElement('li');
  listItem.textContent = bookName;
  document.getElementById('bookList').appendChild(listItem);
}

对于删除功能，可以给每个图书列表项添加一个点击事件监听器，点击时调用`array.splice()`函数从数组中移除对应的元素，同时在DOM上删除相应的列表项。比如，删除第n个图书：

const deleteButton = document.querySelectorAll('#bookList li button.delete')[n]; // 获取第n个删除按钮
deleteButton.addEventListener('click', function() {
  books.splice(n, 1); // 删除数组中的第n个元素
  this.parentElement.remove(); // 删除DOM中的列表项
});