javascript – jQuery删除方法出错了

我是 Javascript / jQuery的新手,我正在尝试根据用户输入到表中来构建项目列表.

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

@L_696_4@

我得到它,以便当用户进行输入时,它会将数据添加为一行(参见图像),但是,我需要它才能工作,这样当用户点击红色的“删除”按钮时,它会删除整个表格 – 行.现在,它只是在我点击它时删除按钮(见第三张图片).

这是我的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 @R_583_10586@l 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();
    });

});