Solution 1 :

I would do this by keeping a track of the objects that are on the table using a structure such as an array. Create a separate array and update the same as you update the table. While doing so, do the following:
html = `<tr><td>${item}</td><td><input type="button" onclick="remove('${item}')" value="Remove"></td></tr>`;

Next, add a function that will filter the array to remove the value you clicked from the same and then, recreate the table.

function remove(input) {
    arr = arr.filter((value, index, arr) => { return value != input;});

I have made a fiddle to demonstrate the same:

Edit: After looking at your update, this code might help you.

Hope it helps.

Problem :

I have a table that dynamically adds a row after values are inputted. How can I add a delete button at the end of the table which will delete the row and the data that is appended in an array?

I am guessing one way to go about it is using classList and appending it to the last , which in this case is where the “X” delete button is placed in the table.

let myLibrary = [];

function Book(titles, authors, pages, reads){
    this.titles = titles,
    this.authors = authors,
    this.pages = pages,
    this.reads = reads

function addBookToLibrary(){
    let t = document.getElementById("titles").value;
    let a = document.getElementById("authors").value;
    let p = document.getElementById("pages").value;
    let r = document.getElementById("reads").value;

    let book = new Book(t, a, p, r);

function deleteButton(){
    let tds = document.querySelectorAll("td");
    for (let i = 0; i < tds.length; i++){
        let text = tds[i].innerText;
        if (text === "x"){

let subDisplay = document.getElementById("subDisplay");
subDisplay.addEventListener("click", displayDetails);
let row = 1;

function displayDetails(){
    let title = document.getElementById("titles").value;
    let author = document.getElementById("authors").value;
    let pages = document.getElementById("pages").value;
    let read = document.getElementById("reads").value;

    let display = document.getElementById("display");
    let newRow = display.insertRow(row);

    let cell1 = newRow.insertCell(0);
    let cell2 = newRow.insertCell(1);
    let cell3 = newRow.insertCell(2);
    let cell4 = newRow.insertCell(3);
    let cell5 = newRow.insertCell(4);

    cell1.innerHTML = title;
    cell2.innerHTML = author;
    cell3.innerHTML = pages;
    cell4.innerHTML = read;
    cell5.innerHTML = "x";



let modalBtn = document.querySelector('.modal-btn');
let modalBg = document.querySelector('.modal-bg');
let modalClose = document.querySelector(".modal-close");
let submitBtn = document.querySelector(".submit-button");

modalBtn.addEventListener("click", function(){

modalClose.addEventListener("click", function(){
*, *::after, *::before{
    box-sizing: border-box;

nav {
    background-color: black;
    color: white;
    height: 35px;
    position: relative;

p {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px;

table {
    width: 100%;

th {
    text-align: left;

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;

th, td {
    padding: 10px;

    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s;

    visibility: visible;
    opacity: 1;

    position: relative;
    padding: 10px;
    font-family: "montserrat", sans-serif;
    background-color: white;
    width: 30%;
    height: 30%;
    display: flex;
    justify-content: space-around;
    align-content: center;
    flex-direction: column;

    padding: 10px 30px;
    background-color: black;
    color: white;
    border: none;
    font-family: "Montserrat", sans-serif;
    cursor: pointer;

    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;

    margin-top: 10px;
    margin-bottom: 10px;
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src = "script.js" defer></script>
    <link rel = "stylesheet" href="styles.css">

    <div class = displaytable>
        <table id = "display">

    <button class="modal-btn">Add Book</button>
    <button class = "delete-btn">Delete Book</button>

    <div class="modal-bg">
        <div class ="modal">

            <label for="name">Title</label>
            <input type="text" name="name" id = "titles">

            <label for="name">Author</label>
            <input type="text" name="name" id = "authors">

            <label for="name">Pages</label>
            <input type="text" name="name" id = "pages">

            <label for="name">Read</label>
            <input type="text" name="name" id = "reads">
            <span class="modal-close">x</span>

            <button class="submit-button" id = "subDisplay" onclick="addBookToLibrary()">Submit</button>



Comment posted by Mihail Minkov

Hello @hwjhkm normally in these cases it helps a lot if you provide an example of what you are using already. The ideal would be if you provide the HTML for the table, and the JavaScript for the add row you are using.

Comment posted by hwjhkm

Hi @MihailMinkov, thank you, I added the code. It was my first ever post on stackoverflow, so thank you for the information.