Javascript jQuery删除方法出错

我是Javascript/jQuery新手，正在尝试根据用户在表中的输入构建一个项目列表

这里的想法是，用户将文本输入表单，js/jQuery将捕获该数据并将其显示为boostrap4表中的一行

我得到了它，这样当用户进行输入时，它会将数据添加为一行（见图），然而，我需要它工作，这样当用户单击红色的“删除”按钮时，它会删除整个表行。现在，当我点击按钮时，它只是移除了按钮（参见第三幅图）

这是我的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>

观察名单
将系列添加到您的观察列表中，并在新数据可用时收到电子邮件通知

您希望如何接收电子邮件通知？
每日文摘
个别地


加入观察名单


象征
名称
新数据？

以下是我的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();
    });

});

$（文档）.ready（函数（）{
$（'.additems'）.submit（函数（事件）{
event.preventDefault（）；
var item=$（“#监视列表项”）.val（）；
如果（项目）{
$（“#表项”）.append（“S”+项+“S&P500总收益指数Get DataRemove”）
$（“#监视列表项”）.val（“”）；
}
});
$（文档）。在（“单击”，“删除”，函数（）上）{
$（this.parent（）.remove（）；
});
});

按钮位于

td

中，因此它的父项是

td

，而不是

tr

。使用两个

.parent（）

调用再向上调用一个，或者使用

.closest（“tr”）

选择行…（提示空气吉他噪音）