Programming with JavaScript
function removeElement(el) {
el.parentElement.remove();
}
document.getElementById('myButton').onclick = function () {
const name = document.getElementById('name').value;
const date = document.getElementById('date').value;
const amount = document.getElementById('amount').value;
const nameTd = '<td>' + name + '</td>';
const dateTd = '<td>' + date + '</td>';
const amountTd = '<td>' + '$'+ amount + '</td>' + '<td>' +
'<button id="removeBtn"type="button" onClick="removeElement(this)">X</button></td>';
const tr = '<tr>' + nameTd + dateTd + amountTd + '</tr>';
document.getElementById('table').insertAdjacentHTML('beforeend', tr);
document.getElementById('clearList').onclick = function () {
const cl = document.getElementById('table');
while (cl.hasChildNodes()) {
cl.removeChild(cl.firstChild);
}
}
document.getElementById('name').value = '';
document.getElementById('amount').value = '';
document.getElementById('date').value = '';
}
Building the Front-End Interface with HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Tracker</title>
</head>
<body>
<h1>Expense Tracker</h1>
<h3>Add A New Item:</h3>
<label>Name: <input text="text" id="name"></label><br>
<label>Date:<input type="date" id="date"></label><br>
<label>Amount:<input text="text" id="amount"></label><br>
<button type="button" id="myButton">Add Expense</button>
<button type="button" id="clearList">Clear List</button>
<br>
<br>
<br>
<br>
<br>
<table border="1">
<tr>
<th>Name</th>
<th>Date</th>
<th>Amount</th>
<th>Remove</th>
</tr>
<tbody id="table">
</tbody>
</table>
<script src="script2.js"></script>
</body>
</html>
Hello there! I'm currently working on a feature where users can remove an expense item by clicking the "X" button. However, I encountered an issue where clicking the button only removes the button itself and not the entire input field. Can you help me troubleshoot this problem?