<p>I have a form element that contains multiple lines of inputs.  Think of each line as attributes of a new object that I want to create in my web application. And, I want to be able to create multiple new objects in one HTTP POST. I'm using Javascript's built-in cloneNode(true) method to clone each line.  The problem is that each input-line also has a removal link attached to its onclick-event:</p>

<pre><code>// prototype based
&lt;div class="input-line"&gt;
    &lt;input .../&gt;
    &lt;a href="#" onclick="$(this).up().remove();"&gt; Remove &lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>When the cloned input-line's removal link is clicked, it also removes any input-lines that were cloned from the same dom object.  Is it possible to rebind the "this" object to the proper anchor tag after using cloneNode(true) on the above DOM element?</p>

[{'answer_id': 29771, 'author': 'Fredrik Kalseth', 'author_id': 1710, 'author_profile': 'https://Stackoverflow.com/users/1710', 'pm_score': -1, 'selected': False, 'text': '<p>Looks like you\'re using jQuery? It has a method to clone an element with events: <a href="http://docs.jquery.com/Manipulation/clone#true" rel="nofollow noreferrer">http://docs.jquery.com/Manipulation/clone#true</a></p>\n\n<p>EDIT: Oops I see you\'re using Prototype.</p>\n'}, {'answer_id': 32281, 'author': 'doekman', 'author_id': 56, 'author_profile': 'https://Stackoverflow.com/users/56', 'pm_score': 0, 'selected': False, 'text': "<p>You could try cloning using the innerHTML method, or a mix:</p>\n\n<pre><code>var newItem = $(item).cloneNode(false);\nnewItem.innerHTML = $(item).innerHTML;\n</code></pre>\n\n<p>Also: I think cloneNode doesn't clone events, registered with addEventListener. But IE's attachEvent events <em>are</em> cloned. But I might be wrong.</p>\n"}, {'answer_id': 170515, 'author': 'Greg', 'author_id': 24181, 'author_profile': 'https://Stackoverflow.com/users/24181', 'pm_score': 0, 'selected': False, 'text': '<p>I tested this in IE7 and FF3 and it worked as expected - there must be something else going on.</p>\n\n<p>Here\'s my test script:</p>\n\n<pre><code>&lt;div id="x"&gt;\n    &lt;div class="input-line" id="y"&gt;\n        &lt;input type="text"&gt;\n        &lt;a href="#" onclick="$(this).up().remove();"&gt; Remove &lt;/a&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n\n&lt;script&gt;\n\n$(\'x\').appendChild($(\'y\').cloneNode(true));\n$(\'x\').appendChild($(\'y\').cloneNode(true));\n$(\'x\').appendChild($(\'y\').cloneNode(true));\n\n&lt;/script&gt;\n</code></pre>\n'}, {'answer_id': 175324, 'author': 'J5.', 'author_id': 25380, 'author_profile': 'https://Stackoverflow.com/users/25380', 'pm_score': 0, 'selected': False, 'text': '<p>To debug this problem, I would wrap your code</p>\n\n<pre><code>$(this).up().remove()</code></pre>\n\n<p>in a function:</p>\n\n<pre><code>function _debugRemoveInputLine(this) {\n    debugger;\n    $(this).up().remove();\n}</code></pre>\n\n<p>This will allow you to find out what $(this) is returning.  If it is indeed returning more than one object (multiple rows), then you definitely know where to look -- in the code which creates the element using cloneNode.  Do you do any modification of the resulting element (i.e. changing the id attribute)?</p>\n\n<p>If I had the problem you\'re describing, I would consider adding unique IDs to the triggering element and the "line" element.</p>\n'}, {'answer_id': 194969, 'author': 'Kornel', 'author_id': 27009, 'author_profile': 'https://Stackoverflow.com/users/27009', 'pm_score': 4, 'selected': True, 'text': '<p>Don\'t put handler on each link (this really should be a button, BTW). Use <a href="http://www.quirksmode.org/js/events_order.html" rel="noreferrer">event bubbling</a> to handle <em>all</em> buttons with one handler:</p>\n\n<pre><code>formObject.onclick = function(e)\n{\n    e=e||event; // IE sucks\n    var target = e.target||e.srcElement; // and sucks again\n\n    // target is the element that has been clicked\n    if (target &amp;&amp; target.className==\'remove\') \n    {\n        target.parentNode.parentNode.removeChild(target.parentNode);\n        return false; // stop event from bubbling elsewhere\n    }\n}\n</code></pre>\n\n<p>+</p>\n\n<pre><code>&lt;div&gt;\n  &lt;input…&gt;\n  &lt;button type=button class=remove&gt;Remove without JS handler!&lt;/button&gt;\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 215710, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': "<p>First answer is the correct one.</p>\n\n<p>Pornel is implicitly suggesting the most cross-browser and framework agnostic solution.</p>\n\n<p>Haven't tested it, but the concept will work in these dynamic situations involving events.</p>\n"}]
['https://Stackoverflow.com/questions/29624', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1376/']