I have a challenge where I need to remove 2 specific elements from a table depending on which delete button is clicked
Check out the code snippet below :
<!--HTML-->
<button type="button" class="collapsible">Manage Formulas</button>
<div class="form-group content">
<br />
<button type="button" class="add-formula"><i class="fas fa-plus-circle"> Add Formula</i></button>
<div class="panel-body add-formula">
</div>
</div>
// JavaScript
// adding formula
$('body').on('click', '.add-formula', function() {
const $formula = $('<div>').addClass('formula-div');
const $line_formula = $('<div>').addClass('line-formula');
const $btn_formula = $('<th>');
const $table_formula = $('<table class="table" id="formula">');
const $head_formula = $('<thead>');
const $tr_formula = $('<tr>');
// code continues...
});
// adding field
$('body').on('click', '.add-field', function(event) {
// function implementation here...
});
// deleting field
$('body').on('click', '.delete-field', function(event) {
// function implementation here...
});
This does not behave as expected and I need it to work differently.
The current behavior is that clicking the "Delete" button removes an entire column.
What I expect is that when I click a delete button, the specific element related to that button should be removed along with the adjacent "Operator" element.
Please see the desired outcome in the provided screenshot :
Lastly, here's how you can interact with this code snippet :