 <p>I'm not sure if that's what you're looking for, but just as a quick example without having looked at the actual code but using the CSS from the Stackoverflow tag elements - you can just retrieve the value of the input on <code>change()</code>, create an element, append the value of input and an additional element to remove the created and appended element on <code>click()</code>. As the new tag is appended and not already in the DOM when the page is loaded, you can use <code>on()</code> to delegate this <code>click()</code> event from a parent element. Instead of <code>document</code> any parent element can be used to delegate the event. </p> <p>For reference: <a href="http://api.jquery.com/on/" rel="nofollow">http://api.jquery.com/on/</a></p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".taginput").on("change", function () { var tagval = $(this).val(); var tagelement = $("&lt;a&gt;"); var remove = $("&lt;span class='remove'&gt;x&lt;/span&gt;") $(tagelement).append(tagval).append(remove).addClass("tag"); $("body").append(tagelement); $(".taginput").remove(); }); $(document).on("click", ".remove", function () { $(this).parent().remove(); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.tag { background: none repeat scroll 0 0 #e4edf4; border: 1px solid #e4edf4; border-radius: 0; color: #3e6d8e; display: inline-block; font-size: 12px; line-height: 1; margin: 2px 2px 2px 0; padding: 0.4em 0.5em; text-align: center; text-decoration: none; white-space: nowrap; } .remove { padding-left:10px; position:relative; top:-2px; } .remove:hover { cursor:pointer; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;input class="taginput" type="text"/&gt;</code></pre> </div> </div> </p>