使用innerHTML javascript从数组中删除特定元素答案

【问题标题】：Delete specific element from array with innerHTML javascript使用innerHTML javascript从数组中删除特定元素
【发布时间】：2021-05-20 16:05:28
【问题描述】：

我需要用 javascript 制作一个简单的项目，我们需要使用 javascript 对象创建一个库并让用户添加新书。我在 html 中使用表单标签请求用户数据并创建了新对象，并将它们存储在一个名为 library 的单个数组中。这些书在 DOM 中显示没有问题，问题是我需要一个删除特定书的按钮，我创建了一个按钮，但它只删除数组中的第一本书。我希望你能帮助我。

HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css" />
    <title>Document</title>
</head>
<body>
    <h1>My Library</h1>
    <input id="title" type="text" placeholder="Book Title">
    <input id="author" type="text" placeholder="Book Author">
    <input id="date" type="text" placeholder="Publish Date">

    <select id="read" name="read">
      <option value="yes">yes</option>
      <option value="no">no</option>
    </select> 

    <input type="button" value="New Book" onclick="add_book()">

    <div id="display"></div>
  
    <script src="app.js"></script>
</body>
</html>


------------------------------------------------------------------------------------------------


JAVASCRIPT:

var library = [];

var title_input = document.getElementById("title");
var author_input = document.getElementById("author");
var date_input = document.getElementById("date");
var read_input = document.getElementById("read");

function Book(title, author, date, read) {
    this.title = title;
    this.author = author;
    this.date = date
    this.read = read
};

function add_book() {
    var newBook = new Book(title_input, author_input, date_input, read_input)
    library.push(`Title: ${newBook.title.value} <br>`+`Author: ${newBook.author.value} <br>`+
    `Realease date: ${newBook.date.value} <br>`+`Readed: ${newBook.read.value} <br>` )
    show_library(); 
};

function delete_book(arr, elem){
    index = arr.indexOf(elem);
    arr.splice(elem,1);
    show_library(); 
}

function show_library() {
    document.getElementById("display").innerHTML = "";
    for(i = 0; i<library.length; i++){
        document.getElementById("display").innerHTML += library[i]+
        '<button onclick="delete_book(library, library[i]);">Delete</button><br>';
    }
};

【问题讨论】：

标签： javascript arrays javascript-objects

【解决方案1】：

您已将library[i] 作为纯文本写入 DOM。这不会从您的循环中引用变量 i。

您可以简单地将索引编写为参数，并直接在您的函数delete_book 中使用它。

var library = [];

var title_input = document.getElementById("title");
var author_input = document.getElementById("author");
var date_input = document.getElementById("date");
var read_input = document.getElementById("read");

function Book(title, author, date, read) {
    this.title = title;
    this.author = author;
    this.date = date
    this.read = read
};

function add_book() {
    var newBook = new Book(title_input, author_input, date_input, read_input)
    library.push(`Title: ${newBook.title.value} <br>`+`Author: ${newBook.author.value} <br>`+
    `Realease date: ${newBook.date.value} <br>`+`Readed: ${newBook.read.value} <br>` )
    show_library(); 
};

function delete_book(arr, index){
    arr.splice(index, 1);
    show_library(); 
}

function show_library() {
    document.getElementById("display").innerHTML = "";
    for(i = 0; i<library.length; i++){
        document.getElementById("display").innerHTML += library[i]+
        `<button onclick="delete_book(library, ${i});">Delete</button><br>`;
    }
};

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css" />
    <title>Document</title>
</head>
<body>
    <h1>My Library</h1>
    <input id="title" type="text" placeholder="Book Title">
    <input id="author" type="text" placeholder="Book Author">
    <input id="date" type="text" placeholder="Publish Date">

    <select id="read" name="read">
      <option value="yes">yes</option>
      <option value="no">no</option>
    </select> 

    <input type="button" value="New Book" onclick="add_book()">

    <div id="display"></div>
  
    <script src="app.js"></script>
</body>
</html>

【讨论】：