Question
Answer and Explanation
To delete a task row in JavaScript, you typically need to interact with the DOM (Document Object Model). Here's a breakdown of how you can achieve this, along with a practical example:
1. HTML Structure:
- Assume you have a table or a similar structure where each task is represented as a row (<tr>). Each row should have a button or some element that triggers the deletion.
- Example HTML:
<table id="taskTable">
<thead>
<tr><th>Task</th><th>Actions</th></tr>
</thead>
<tbody>
<tr data-task-id="1"><td>Task 1</td><td><button class="delete-btn">Delete</button></td></tr>
<tr data-task-id="2"><td>Task 2</td><td><button class="delete-btn">Delete</button></td></tr>
</tbody>
</table>
2. JavaScript Logic:
- Use JavaScript to add an event listener to the delete buttons. When a button is clicked, the script should identify the parent row and remove it from the DOM.
3. Example JavaScript Code:
document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('taskTable');
table.addEventListener('click', function(event) {
if (event.target.classList.contains('delete-btn')) {
const button = event.target;
const row = button.closest('tr');
if (row) {
row.remove();
}
}
});
});
4. Explanation:
- The code first waits for the DOM to be fully loaded using DOMContentLoaded.
- It then adds a click event listener to the table. This is more efficient than adding listeners to each button individually.
- Inside the event listener, it checks if the clicked element has the class delete-btn.
- If it does, it finds the closest parent <tr> element using closest('tr').
- Finally, it removes the row from the DOM using row.remove().
5. Considerations:
- If you are working with dynamically generated rows, ensure that the event listener is attached to a parent element that is always present in the DOM (like the table itself).
- For more complex applications, you might need to update your data model or send a request to the server to reflect the deletion.
By using this approach, you can effectively delete task rows from your HTML table using JavaScript. This method is efficient and easy to implement.