title: Remove HTML li and text from JavaScript
body: <p>I am adding HTML from my JavaScript a remove button with text. I want to remove the li and the text with it. </p>
  
  <p>I believe that I am not correctly finding the li item to remove it.</p>
  
  <p>Any help is appreciated!</p>
  
  <pre><code>$("#add_btn").click(function() {
  
      var job = $("#add_task").val().trim();
  
      if (job.length != 0) {
          $("#theList").append(
              '&lt;li&gt;' + '&lt;button id="remove_btn"&gt;Remove&lt;/button&gt;' + job + '&lt;/li&gt;'
              );
      } 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
  });
  </code></pre>
  
  <p>Below is the HTML:</p>
  
  <pre><code>"http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;To Do List&lt;/title&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="toDoList.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;To Do List&lt;/h1&gt;
  
      &lt;label for="add_task"&gt;Add Task:&lt;/label&gt;
      &lt;input type="text" id="add_task" name="add_task"&gt;
      &lt;br&gt;
  
      &lt;button id="add_btn"&gt;
          Add the task
      &lt;/button&gt;
  
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
  
      &lt;h2&gt;My To Do List&lt;/h2&gt;
      &lt;ol id="theList"&gt;
      &lt;/ol&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>