jQuery Remove 方法出错了

Question

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

});

Answer 1

按钮位于td 中，因此其父级是td，而不是tr。使用两个.parent() 调用再上一个，或使用.closest("tr")