javascript - 如何使用jQuery删除表格中仅一行附加信息？

我正在尝试制作一个“我的最爱电影”列表页面，用户可以在其中添加和评价电影。该程序应包括：

1）您可以在其中添加列表并对其进行评分的表单

2）您添加的所有内容的表格

3）表格的每一行的删除按钮，可让您从列表中删除元素（我遇到的麻烦）

而不是只删除一行，而是删除表中每个附加的电影/评级。同样，如果您单击其他任何位置，它也会删除所有内容。

4）红利：排序功能，因此我可以按标题或等级对表格中的条目进行排序。

此处的示例：rithm school example

$(function() {
  $('#addMovieButton').click(function() {
    var addToTitle = $('#title').val();
    $('#tableTitle').append('<tr><td>' + addToTitle + '</td></tr>');

    var addToRating = $("#rating").val();
    $('#tableRating').append('<tr><td>' + addToRating + '</td></tr>');

    $('#tableDelete').append('<tr><td><input type="button" value="Delete All"</tr></td>');

    $('#tableRow').on('click', function() {
      $('#tableTitle').last().children().remove();
      $('#tableRating').last().children().remove();
      $('#tableDelete').last().children().remove();


    });
  });
});

h1 {
  text-align: center;
}

table {
  width: 100%;
  border-radius: 10px;
}

table,
td {
  border: 1px solid black;
  padding: 15px;
}

th {
  height: 50px;
  text-align: center;
}

td {
  text-align: center;
}

body {
  font-family: helvetica;
}

form {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <label><b>Title</b></label>
  <input id="title" type="text" value="Movie Title">

  <label><b>Rating</b></label>
  <input id="rating" type="text" value="Rate The Movie from 0 to 10">

  <button type='button' id="addMovieButton">Add Movie</button>
</form>

<table>
  <tr id="tableRow">
    <th id="tableTitle">Title</th>
    <th id="tableRating">Rating</th>
    <th id="tableDelete">Delete</th>
  </tr>
</table>

最佳答案

您已将所有标题放在一个父级中，所有评分都在另一个父级中，所有删除按钮都放在另一个父级中。您应该将有关每一行的信息放在父级中，然后可以轻松地逐行删除。
（也可以添加td，这只是示例，以示方式）

$('#addMovieButton').click(function () {
                var addToTitle = $('#title').val();
                var addToRating = $("#rating").val();
                $('#table').append('<tr><th>' + addToTitle + '</th><th>' + addToRating + '</th><th><input type="button" value="Delete All" class="tableDelete"></th></tr>');


                $('.tableDelete').click(function () {
                    $(this).parents('tr').remove();

                });

            });

        h1 {
  text-align: center;
}

table {
  width: 100%;
  border-radius: 10px;
}

table,
td {
  border: 1px solid black;
  padding: 15px;
}

th {
  height: 50px;
  text-align: center;
}

td {
  text-align: center;
}

body {
  font-family: helvetica;
}

form {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <form>
        <label><b>Title</b></label>
        <input id="title" type="text" value="Movie Title">

        <label><b>Rating</b></label>
        <input id="rating" type="text" value="Rate The Movie from 0 to 10">

        <button type='button' id="addMovieButton">Add Movie</button>
    </form>

    <table id="table">

    </table>

关于javascript - 如何使用jQuery删除表格中仅一行附加信息？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59342480/