title: jQuery Remove method gone wrong
body: <p>I'm new to Javascript/jQuery and am trying to build a list of items based off a user input into a table.</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/nXXnm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nXXnm.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/HDHNe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HDHNe.jpg" alt="enter image description here"></a></p>
  
  <p>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).</p>
  
  <p><a href="https://i.stack.imgur.com/wCR9T.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wCR9T.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="tab-pane fade" id="watchlist" role="tabpanel" aria-labelledby="watchlist-tab"&gt;
                    &lt;h2 class="display-4"&gt;Watch List&lt;/h2&gt;
                    &lt;p class="lead"&gt;Add series to your watch list and receive an e-mail notification when new data is available.&lt;/p&gt;
                    &lt;p class="card-text"&gt;
                      &lt;div class="form-check form-check-inline"&gt;
                        &lt;span class="mr-2"&gt;How would you like to receive your e-mail notifications?&lt;/span&gt;
                        &lt;label class="form-check-label" data-toggle="tooltip" data-placement="top" title="Get email updates on your series bundled in one single daily email."&gt;
                          &lt;input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"&gt; Daily Digest
                        &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;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."&gt;
                        &lt;label class="form-check-label"&gt;
                          &lt;input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"&gt; Individually
                        &lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/p&gt;
                    &lt;p class="card-text mt-2"&gt;
                      &lt;form class="add-items"&gt;
                          &lt;div class="form-row align-items-center"&gt;
                            &lt;div class="col-md-6"&gt;
                              &lt;input type="text" class="form-control mb-2 mb-sm-0" id="watchlist-item" placeholder="Search series by name or symbol..."&gt;
                            &lt;/div&gt;
                            &lt;div class="col-auto"&gt;
                              &lt;button type="submit" class="btn btn-dark" style="margin-left:-12px"&gt;Add to Watch List&lt;/button&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/form&gt;
                    &lt;/p&gt;
                    &lt;p class="card-text"&gt;
                      &lt;table class="table table-sm table-hover"&gt;
                        &lt;thead&gt;
                          &lt;tr&gt;
                            &lt;th scope="col"&gt;Symbol&lt;/th&gt;
                            &lt;th scope="col"&gt;Name &lt;i class="ml-4 fa fa-sort" aria-hidden="true"&gt;&lt;/i&gt;&lt;/th&gt;
                            &lt;th scope="col"&gt;New Data? &lt;i class="ml-4 fa fa-sort" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Sort data by latest release."&gt;&lt;/i&gt;&lt;/th&gt;
                            &lt;th scope="col"&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody id="table-items"&gt;
  
                        &lt;/tbody&gt;
                      &lt;/table&gt;
                    &lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p>Here is my jQuery:</p>
  
  <pre><code>$(document).ready(function () {
  
  
    $('.add-items').submit(function(event) {
      event.preventDefault();
  
      var item = $('#watchlist-item').val();
  
      if (item) {
        $('#table-items').append("&lt;tr&gt;S&lt;td&gt;" + item + "&lt;/td&gt;&lt;td&gt;S&amp;P 500 Total Return Index&lt;/td&gt;&lt;td&gt;&lt;button class='btn btn-info'&gt;Get Data&lt;/button&gt;&lt;/td&gt;&lt;td&gt;&lt;button class='btn btn-danger remove'&gt;Remove&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;")
        $('#watchlist-item').val("");
      }
    });
  
    $(document).on("click", ".remove", function() {
          $(this).parent().remove();
      });
  
  });
  </code></pre>