Dynamically adding an HTML section via JavaScript duplicates the HTML code on refresh

Question

I am trying to resolve a course project of mine and I am having hard time with one of the functionalities. I have a piece that should fetch and display all entries from a Firebase DB but what it does on refresh is to add one more to the DOM (no change in Firebase) instead of simply returning the Firebase results.

const data = {
  "-MQufI6df_3HJ6WQtB0u": {
    "author": "Test",
    "isbn": "123",
    "title": "Testing1"
  },
  "-MQufLMu5gGKQlZE0UrN": {
    "author": "Test",
    "isbn": "123",
    "title": "Testing2"
  },
  "-MQufLwiyLP6T3pXHKH5": {
    "author": "Test",
    "isbn": "123",
    "title": "Testing3"
  }
}


document.getElementById('loadBooks').addEventListener('click', function() {
  document.getElementById('booksList').innerHTML = '';

  let books = Object.entries(data);

  for (const book in books) {
    console.log(book);

    let currentBook = books[book][1];
    let newBook = document.createElement('tr');
    newBook.innerHTML = `
                <tr>
                 <td>${currentBook.title}</td>
                 <td>${currentBook.author}</td>
                 <td>${currentBook.isbn}</td>
                 <td style="display: none">${books[book][0]}</td>
                 <td>
                  <button>Edit</button>
                  <button>Delete</button>
                 </td>
                </tr>
                    `;
    document.getElementById('booksList').appendChild(newBook);
  }
});

<button id="loadBooks">LOAD ALL BOOKS</button>
<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>Isbn</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody id="booksList">
  </tbody>
</table>

<form>
  <h3>FORM</h3>
  <label>TITLE</label>
  <input type="title" id="title" placeholder="Title...">
  <label>AUTHOR</label>
  <input type="title" id="author" placeholder="Author...">
  <label>ISBN</label>
  <input type="title" id="isbn" placeholder="Isnb...">
  <button id="submit">Submit</button>
</form>

Current result: Lets say I have 1 book: Book - John Smith - 1234

After hitting again the 'loadBooks;' btn I see in the browser: Book - John Smith - 1234 Book - John Smith - 1234

Expected result: On refresh I should only see: Book - John Smith - 1234

until I add a second book to my list.

The generated markup is invalid. You cannot have a <button> as a direct child of a <tr>. — Andreas
– Andreas, Commented Jan 13, 2021 at 7:11
Add the minimal reproducible example in the question itself (-> I've been told to create a “runnable” example with “Stack Snippets”, how do I do that?) and not only as a comment which points to an external resource. And please remove everything that is not directly related to the problem (the CSS is not relevant, replace the firebase part with only the content of the response (const data = ...)) — Andreas
– Andreas, Commented Jan 13, 2021 at 7:23
Thanks for the tips! I will make sure to change everything accordingly. — Petromir Kolev
– Petromir Kolev, Commented Jan 13, 2021 at 7:32
Done but oddly enough it works here so I guess it is something else in my code that does it... — Petromir Kolev
– Petromir Kolev, Commented Jan 13, 2021 at 7:59

Sanoodia · Accepted Answer · 2021-01-13 08:09:33Z

1

you need to simply add one check before appending child 'newBook' in 'booksList'

var booksList = document.getElementById("booksList");
if(booksList !== null){ // thats means its exists in dom
   document.getElementById('booksList).innerHTML = ''
}

answered Jan 13, 2021 at 8:09

Sanoodia

9254 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically adding an HTML section via JavaScript duplicates the HTML code on refresh

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related