Remove HTML li and text from JavaScript

Question

I am adding HTML from my JavaScript a remove button with text. I want to remove the li and the text with it.

I believe that I am not correctly finding the li item to remove it.

Any help is appreciated!

$("#add_btn").click(function() {

    var job = $("#add_task").val().trim();

    if (job.length != 0) {
        $("#theList").append(
            '<li>' + '<button id="remove_btn">Remove</button>' + job + '</li>'
            );
    } else {
        window.alert("Don't add blank job");
    }
});

$("#remove_btn").click(function() { 
    //intended to remove li and text... 
    $(this).next().remove(); //this is not working
});

Below is the HTML:

"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>To Do List</title>

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="toDoList.js"></script>

</head>
<body>
    <h1>To Do List</h1>

    <label for="add_task">Add Task:</label>
    <input type="text" id="add_task" name="add_task">
    <br>

    <button id="add_btn">
        Add the task
    </button>

    <br>
    <br>
    <br>

    <h2>My To Do List</h2>
    <ol id="theList">
    </ol>
</body>
</html>

Answer 1

Do not use id in a repetitive place. I am updating your code with a few corrections:

$("#add_btn").click(function() {
  var job = $("#add_task").val().trim();
  if (job.length != 0) {
    $("#theList").append(
      //----------------v---v: Change ID to Class. You are repeating.           «««««
      '<li>' + '<button class="remove_btn">Remove</button>' + job + '</li>'
    );
  } else {
    window.alert("Don't add blank job");
  }
});

// Delegate the event.                                                          «««««
$("#theList").on("click", ".remove_btn", function() { 
  //intended to remove li and text... 
  // Change to closest as the button is inside the `<li>`                       «««««
  $(this).closest("li").remove(); // this will work
});

Snippet

 $(function () { $("#add_btn").click(function() { var job = $("#add_task").val().trim(); if (job.length != 0) { $("#theList").append( //----------------v---v: Change ID to Class. You are repeating. '<li>' + '<button class="remove_btn">Remove</button>' + job + '</li>' ); } else { window.alert("Don't add blank job"); } }); // Delegate the event. $("#theList").on("click", ".remove_btn", function() { //intended to remove li and text... // Change to closest as the button is inside the `<li>` $(this).closest("li").remove(); // this will work }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h1>To Do List</h1> <label for="add_task">Add Task:</label> <input type="text" id="add_task" name="add_task"> <br> <button id="add_btn"> Add the task </button> <br> <br> <br> <h2>My To Do List</h2> <ol id="theList"> </ol>

Remove HTML li and text from JavaScript

Question

1 answers

solution1
3 ACCPTED 2015-12-05 23:43:03

Remove HTML li and text from JavaScript

Question

1 answers

solution1 3 ACCPTED 2015-12-05 23:43:03

solution1
3 ACCPTED 2015-12-05 23:43:03