3
私はJavascript/jQueryを使い慣れていて、テーブルへのユーザー入力に基づいて項目のリストを作成しようとしています。jQuery削除方法が間違っていた
ここで考えられるのは、ユーザーがフォームにテキストを入力し、js/jQueryがそのデータをキャプチャして、それをboostrap4テーブルの行として表示するという考えです。
ユーザが入力しない場合、それは行としてデータを追加するように、私はそのようにする際、ユーザ（画像を参照）、しかし、私は仕事にそれを必要とそれを持って赤い「削除」ボタンをクリックすると、テーブル行全体が削除されます。今すぐボタンをクリックするとボタンが削除されます（3番目の画像を参照）。ここで
私の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();
});
});
を選択して、行を選択します。 – epascarello