Delete from Table Task in HTML with DOM and JavaScript

Write a JS program that takes an e-mail from an input field and deletes matching rows from a table. If no entry is found, an error should be displayed in a <div> with ID "results". The error should read "Not found."

Input/Output:
There will be no input/output, your program should instead modify the DOM of the given HTML document.

Sample HTML:

<table border="1" id="customers">
 <tr><th>Name</th><th>Email</th></tr>
 <tr><td>Eve</td><td>eve@gmail.com</td></tr>
 <tr><td>Nick</td><td>nick@yahooo.com</td></tr>
 <tr><td>Didi</td><td>didi@didi.net</td></tr>
 <tr><td>Tedy</td><td>tedy@tedy.com</td></tr>
</table>
Email: <input type="text" name="email" />
<button onclick="deleteByEmail()">Delete</button>
<div id="result" />

Examples:
delete from table javascript task

asked in JavaScript category by user paulcabalit

share on fb share via email

2 Answers

My solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<>
<table border="1" id="customers">
    <tr>
        <th>Name</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>Eve</td>
        <td>eve@gmail.com</td>
    </tr>
    <tr>
        <td>Nick</td>
        <td>nick@yahooo.com</td>
    </tr>
    <tr>
        <td>Didi</td>
        <td>didi@didi.net</td>
    </tr>
    <tr>
        <td>Tedy</td>
        <td>tedy@tedy.com</td>
    </tr>
</table>
<br>
Email: <input type="text" name="email"/>
&nbsp;
<button onclick="deleteByEmail()">Delete the Email</button>
<div id="result"/>
</div>

<script>
    function deleteByEmail() {
        let target = document.getElementsByName("email")[0].value;
        let emails = document.querySelectorAll("#customers tr td:last-child");
        let deleted = false;
        for (let email of emails) {
            if (email.textContent === target) {
                let row = email.parentNode;
                row.parentNode.removeChild(row);
                deleted = true;
                break;
            }
        }
        if (deleted) {
            document.getElementById("result").textContent = "Deleted."
        } else {
            document.getElementById("result").textContent = "Not found."
        }
    }
</script>
</body>
</html>

answered by user richard8502

Or another solution:

<script>
        function deleteByEmail() {
            let col2 = document.querySelectorAll("#customers tr td:nth-child(2)");
            let email = document.getElementsByName("email")[0].value;
            for (let td of col2) {
                if (td.textContent == email) {
                    let tr = td.parentNode;
                    tr.parentNode.removeChild(tr);
                    document.getElementById("result").textContent = "Deleted.";
                    return;
                }
            }
            document.getElementById("result").textContent = "Not found.";
        }
</script>

answered by user sam

Q: Delete from Table Task in HTML with DOM and JavaScript

Log in (click HERE) or Register (click HERE) to answer this question

2 Answers

Please Log in (click HERE) or Register (click HERE) to add a comment.

Please Log in (click HERE) or Register (click HERE) to add a comment.

Q: Delete from Table Task in HTML with DOM and JavaScript

Log in (click HERE) or Register (click HERE) to answer this question

2 Answers

Please Log in (click HERE) or Register (click HERE) to add a comment.

Please Log in (click HERE) or Register (click HERE) to add a comment.

Related questions