replaceWith is not removing old content before adding new content

[soichih]

I have multiple select boxes under a div, and when I use replaceWith to replace the entire div containing 2 select boxes, the replaceWith will first try to add new div before removing the old div.

This causes all 4 select boxes to co-exist in the DOM thus causing event handling mechanism to malfunction (in Firefox). The work around I have found is to do following

node.empty(); node.replaceWith(res.responseText);

It would save a lot of time for someone if this behavior could be changed in the replaceWith function.

[dmethvin]

Can you attach a simple test case?

[brandon]

Please attach a complete test case. Are you using clone to create the second div? Cloning form elements has issues cross-browser.

[jayfresh]

I don't have a way to show you a simple test case right now, but I had this problem too - I am testing in IE6 and FF3.5 and it's only a problem in IE.

I am replacing an input with a constructed drop-down - this is the code ($row.val is pointing at the input):

var $select = this.makeSelect(values);
$row.val.replaceWith($select);

I have found that if I replace 'replaceWith' with the function suggested in #2697, the problem goes away. Here is the code for that function:

$.fn.replaceWith = function(value) {
    return this.each(function() {
    var e = $(this);
    var s = e.next();
    var p = e.parent();
    e.remove();
    if (s.size())
        s.before(value);
    else
        p.append(value);
    });
};

[jayfresh]

Worth also mentioning that the event handlers on $row didn't fire after a change event on $row.val. With the replacement code in place, they fired.

J.

[john]

Duplicate of #2697.