title: Filter through dynamically inserted td elements
body: <p>I am trying to filter through dynamically inserted &quot;td&quot; elements in the table element within the HTML. I want the user to be able to type in text within the filter input field and if the text matches any of the td elements text content I want to those td elements displayed. I created the &quot;filter&quot; method within the &quot;Music&quot; constructor the last method within the constructor, furthermore, I called the filter method within the &quot;filter field event listener&quot; the last bit of code in the script. Any help would be appreciated. Thanks (I understand this is a lot of code but I wanted to give some context to my question!)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//JavaScript
  // Music Constructor
  class Music {
    constructor(artist, song, album, genre) {
      this.artist = artist;
      this.song = song;
      this.album = album;
      this.genre = genre;
    }
  
  
    // Add song to music list
    addSongToList(music) {
      // Select Music List in UI
      const list = document.querySelector('#music-list');
      //Create Element
      const row = document.createElement('tr');
      row.className = 'row-data';
      row.innerHTML =
        ` &lt;td class="tbl-data"&gt;${music.artist}&lt;/td&gt;
                      &lt;td class="tbl-data"&gt;${music.song}&lt;/td&gt;
                      &lt;td class="tbl-data"&gt;${music.album}&lt;/td&gt;
                      &lt;td class="tbl-data"&gt;${music.genre}&lt;/td&gt;`;
      list.appendChild(row);
    }
  
    // Clear Fields
    clearFields() {
      artist.value = '';
      song.value = '';
      album.value = '';
      genre.value = '';
    }
  
    // Delete Song
    deleteSong(target) {
      if (target.className === 'tbl-data') {
        target.parentElement.remove();
      }
    }
  
    //Filter songs by genre
    filter(input) {
      let songs = document.querySelectorAll('td');
      songs.forEach(function(song) {
        let songRow = song.textContent;
        if (songRow.toLowerCase().includes(input)) {
          song.style.display = 'block';
        }
      })
  
    }
  
    // Welcome message
    static welcomeMsg(message, className) {
      // Create element
      const div = document.createElement('div');
      div.className = 'welcomeMessage';
      div.appendChild(document.createTextNode(message));
      // Select parent
      const parent = document.querySelector('.container');
      const card = document.querySelector('.card');
      parent.insertBefore(div, card);
  
      setTimeout(function() {
        div.remove();
      }, 6000);
    }
  }
  
  // Document object event listener
  document.addEventListener('DOMContentLoaded', function() {
    // Welcome Message call
    Music.welcomeMsg('Welcome, enter your favorite artist, songs, albums, and genre in the input fields below! Double click songs you want to delete once added!');
  })
  
  // Event listener on Form
  document.querySelector('form').addEventListener('submit', function(e) {
    // UI Form Input
    const artist = document.querySelector('#artist').value;
    const song = document.querySelector('#song').value;
    const album = document.querySelector('#album').value;
    const genre = document.querySelector('#genre').value;
  
    //Instantiate Music Constructor 
    const music = new Music(artist, song, album, genre);
    console.log(music);
    // Call prototype method
    music.addSongToList(music);
    music.clearFields()
    e.preventDefault();
  })
  
  // Music list event listener
  document.querySelector('#music-list').addEventListener('dblclick', function(e) {
    //Instantiate Music Constructor 
    const music = new Music(artist, song, album, genre);
    //Remove method call
    music.deleteSong(e.target);
  });
  
  // Filter field event listener 
  document.querySelector('#filter').addEventListener('keyup', function() {
    let filter = document.querySelector('#filter').value;
    //Instantiate Music Constructor 
    const music = new Music(artist, song, album, genre);
    // Call filter prototype method
    music.filter(filter);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//HTML
  
  &lt;body&gt;
    //Container with the input fields
    &lt;div class="primary-container "&gt;
      &lt;div class="container"&gt;
        &lt;h1 class="text-center mb-3"&gt;Favorite Music Archive&lt;/h1&gt;
        &lt;div class="card mx-auto px-4"&gt;
          &lt;form action=""&gt;
            &lt;label for="basic-url" class="form-label form-text"&gt;Music Artist&lt;/label&gt;
            &lt;div class="input-group mb-3"&gt;
              &lt;span class="input-group-text" id="basic-addon3"&gt;&lt;img src="icons/guitar.png" alt="artist" class="icon-img"&gt;&lt;/span&gt;
              &lt;input type="text" class="form-control" id="artist" placeholder="Enter Musical Artist"&gt;
            &lt;/div&gt;
            &lt;label for="basic-url" class="form-label form-text"&gt;Song&lt;/label&gt;
            &lt;div class="input-group mb-3"&gt;
              &lt;span class="input-group-text" id="basic-addon3"&gt;&lt;img src="icons/music.png" alt="song" class="icon-img"&gt;&lt;/span&gt;
              &lt;input type="text" class="form-control" id="song" placeholder="Enter Song"&gt;
            &lt;/div&gt;
            &lt;label for="basic-url" class="form-label form-text"&gt;Album&lt;/label&gt;
            &lt;div class="input-group mb-3"&gt;
              &lt;span class="input-group-text" id="basic-addon3"&gt;&lt;img src="icons/music-album.png" alt="Album" class="icon-img"&gt;&lt;/span&gt;
              &lt;input type="text" class="form-control" id="album" placeholder="Enter Album or Single"&gt;
            &lt;/div&gt;
            &lt;label for="basic-url" class="form-label form-text"&gt;Genre&lt;/label&gt;
            &lt;div class="input-group mb-3"&gt;
              &lt;span class="input-group-text" id="basic-addon3"&gt;&lt;img src="icons/dj.png" alt="genre" class="icon-img"&gt;&lt;/span&gt;
              &lt;input type="text" class="form-control" id="genre" placeholder="Enter Genre"&gt;
            &lt;/div&gt;
            &lt;div class="d-flex justify-content-center p-3"&gt;
              &lt;button type="submit" class="subBtn"&gt;Submit Song&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="second-container"&gt;
      //Filter Input field
      &lt;div class="input-group mb-3"&gt;
        &lt;span class="input-group-text" id="basic-addon1"&gt;&lt;img src="icons/filter.png" alt="filter" class="icon-img"&gt;&lt;/span&gt;
        &lt;input type="text" class="form-control filter-input" placeholder="Filter by genre" id="filter"&gt; //Filter Input End
        &lt;table class="table table-dark table-striped"&gt;
          &lt;thead&gt;
            &lt;tr class="row-head"&gt;
              &lt;th scope="col"&gt;Artist&lt;/th&gt;
              &lt;th scope="col"&gt;Song&lt;/th&gt;
              &lt;th scope="col"&gt;Album&lt;/th&gt;
              &lt;th scope="col"&gt;Genre&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          // Dynamically inserted TD elements will go into tbody
          &lt;tbody id="music-list"&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>