How to get value of "this"?
<p>I have this code:</p>

<p>HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;To Do&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"/&gt;
        &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h2&gt;To Do&lt;/h2&gt;
        &lt;form name="checkListForm"&gt;
            &lt;input type="text" name="checkListItem"/&gt;
        &lt;/form&gt;
        &lt;div id="button"&gt;Add!&lt;/div&gt;
        &lt;br/&gt;
        &lt;div class="list"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Javascript/Jquery:</p>

<pre><code>$(document).ready(function()
{
 $(button).click(function(){
  var toAdd = $('input[name=checkListItem]').val();
  $('.list').append('&lt;div class="item"&gt;' + toAdd + '&lt;/div&gt;');

 });
 $(document).on('click','.item', function(){
   $(this).remove();
  });
});
</code></pre>

<p>This code grabs a user's input, adds it to a list when you click a button, and removes the input from the list when you click on it within the div class item.</p>

<p>How can I make it so that I can return the value of "this"?</p>

<p>For example, if I add the word "test" to the list, and click on it to remove it.... how can grab the value of test from "this"?</p>

<p>Like.. document.write(this) returns [object HTMLDivElement].</p>

<p>I want document.write to return "test" if I click on it in the div.</p>

<p>I can't do document.write(toAdd) because toAdd doesn't exist in the second jquery ("on") function.
Thanks.</p>
