jQuery Remove method gone wrong

Question

I'm new to Javascript/jQuery and am trying to build a list of items based off a user input into a table.

The idea here is that a user would input text into a form, the js/jQuery would capture that data and display it as a row in a boostrap4 table.

I got it so that when a user does the input, it adds the data as a row (see image), however, I need it to work so that when a user clicks the red "remove" button, it removes the entire table-row. Right now, it just removes the button when I click on it (see third image).

Here is my HTML:

<div class="tab-pane fade" id="watchlist" role="tabpanel" aria-labelledby="watchlist-tab">
                  <h2 class="display-4">Watch List</h2>
                  <p class="lead">Add series to your watch list and receive an e-mail notification when new data is available.</p>
                  <p class="card-text">
                    <div class="form-check form-check-inline">
                      <span class="mr-2">How would you like to receive your e-mail notifications?</span>
                      <label class="form-check-label" data-toggle="tooltip" data-placement="top" title="Get email updates on your series bundled in one single daily email.">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> Daily Digest
                      </label>
                    </div>
                    <div class="form-check form-check-inline" data-toggle="tooltip" data-placement="top" title="Get an email instantly when new data is released. You will not get a second email until you've downloaded the most recent data.">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Individually
                      </label>
                    </div>
                  </p>
                  <p class="card-text mt-2">
                    <form class="add-items">
                        <div class="form-row align-items-center">
                          <div class="col-md-6">
                            <input type="text" class="form-control mb-2 mb-sm-0" id="watchlist-item" placeholder="Search series by name or symbol...">
                          </div>
                          <div class="col-auto">
                            <button type="submit" class="btn btn-dark" style="margin-left:-12px">Add to Watch List</button>
                          </div>
                        </div>
                      </form>
                  </p>
                  <p class="card-text">
                    <table class="table table-sm table-hover">
                      <thead>
                        <tr>
                          <th scope="col">Symbol</th>
                          <th scope="col">Name <i class="ml-4 fa fa-sort" aria-hidden="true"></i></th>
                          <th scope="col">New Data? <i class="ml-4 fa fa-sort" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Sort data by latest release."></i></th>
                          <th scope="col"></th>
                        </tr>
                      </thead>
                      <tbody id="table-items">

                      </tbody>
                    </table>
                  </p>
                </div>
              </div>

Here is my jQuery:

$(document).ready(function () {


  $('.add-items').submit(function(event) {
    event.preventDefault();

    var item = $('#watchlist-item').val();

    if (item) {
      $('#table-items').append("<tr>S<td>" + item + "</td><td>S&P 500 Total Return Index</td><td><button class='btn btn-info'>Get Data</button></td><td><button class='btn btn-danger remove'>Remove</button></td></tr>")
      $('#watchlist-item').val("");
    }
  });

  $(document).on("click", ".remove", function() {
        $(this).parent().remove();
    });

});

Answer 1

The button is in a td, so its parent is that td, not the tr. Use two .parent() calls to go up one more, or use .closest("tr")