Currently, I am delving into the world of Javascript/jQuery and attempting to construct a list of items in a table based on user input.
The concept is simple - a user types text into a form, the JavaScript/jQuery captures that input and showcases it as a row in a Bootstrap4 table.
https://i.sstatic.net/nXXnm.jpg
https://i.sstatic.net/HDHNe.jpg
I've managed to add the data as a row when a user inputs it (refer to the image), but my goal now is to enable the functionality where, upon clicking the red "remove" button, the entire table-row is removed. At present, clicking the button simply removes the button itself (as depicted in the third image).
https://i.sstatic.net/wCR9T.jpg
Below is the HTML snippet:
<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>
This is the jQuery section:
$(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();
});
});