settingsAccountsettings
Menusettings

Q: Delete Town by Name (Simple DOM Interaction)

+3 votes

You are given the following HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>Delete Town by Name</title>
    <style>select, input { width: 100px }</style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body onload="attachEvents()">
<div>Towns</div>
<select id="towns" size="4">
    <option>Sofia</option>
    <option>Varna</option>
    <option>Pleven</option>
</select>
<div>
    <input type="text" id="townName" />
    <button id="btnDelete">Delete</button>
</div>
<div id="result"></div>
<script>
    function attachEvents() {
        // TODO
    }
</script>
</body>
</html>

Your Task:

Write the missing JavaScript code to make the [Delete] button work as expected.

  • The [Delete] button should delete all towns from the list matching the value in the “townName” text box.
  • After a town is successfully deleted, show a message <town_name> deleted.” in the “result” div.
  • When the town is missing, show a message “<town_name> not found.” in the “result” div.
  • In all cases clear the value in the “townName” text box.

Examples:

delete town by name task 1

delete town by name task 2

asked in JavaScript category by user hues

1 Answer

+2 votes

My solution in the HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Delete Town by Name</title>
    <style>select, input {
        width: 100px
    }</style>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body onload="attachEvents()">
<div>Towns</div>
<select id="towns" size="4">
    <option>Sofia</option>
    <option>Varna</option>
    <option>Pleven</option>
</select>

<div>
    <input type="text" id="townName"/>
    <button id="btnDelete">Delete</button>
</div>
<div id="result"></div>
<script>
    function attachEvents() {
        $("#btnDelete").on("click", function () {
            let townToDelete = $("#townName").val();
            let towns = $("#towns option").toArray();//JavaScript Array

            let hasDeleted = false;
            for (let town of towns) {
                if (townToDelete === town.textContent) {
                    town.remove();
                    hasDeleted = true;
                }
            }

            if (hasDeleted === true) {
                $("#result").text(`${townToDelete} deleted.`);

            } else {
                $("#result").text(`${townToDelete} not found.`);
            }

            $("#townName").val("");//clear the townName
        });
    }
</script>
</body>
</html>

...and the function only - see line #4 where we make an Array so we can manipulate with it through for of cycle:

  • For input field we are using .val() in jQuery;
  • For div/section we are using .text() or textContent

 

function attachEvents() {
    $("#btnDelete").on("click", function () {
        let townToDelete = $("#townName").val();
        let towns = $("#towns option").toArray();//JavaScript Array

        let hasDeleted = false;
        for (let town of towns) {
            if (townToDelete === town.textContent) {
                town.remove();
                hasDeleted = true;
            }
        }

        if (hasDeleted === true) {
            $("#result").text(`${townToDelete} deleted.`);

        } else {
            $("#result").text(`${townToDelete} not found.`);
        }

        $("#townName").val("");//clear the townName
    });
}
answered by user ak47seo
...