Skip to content
Permalink
Browse files

Make sure that the previous element is removed from the page before t…

…he next is inserted, in replaceWith. Using a variation of the patch by snaury. Fixes #2697.
  • Loading branch information
jeresig committed Dec 5, 2009
1 parent aae0617 commit 2a6de9ab66653e5e424d9cc79d195b555158d04f
Showing with 19 additions and 2 deletions.
  1. +11 −1 src/manipulation.js
  2. +8 −1 test/unit/manipulation.js
@@ -210,7 +210,17 @@ jQuery.fn.extend({

replaceWith: function( value ) {
if ( this[0] && this[0].parentNode ) {
return this.after( value ).remove();
return this.each(function(){
var next = this.nextSibling, parent = this.parentNode;

jQuery(this).remove();

if ( next ) {
jQuery(next).before( value );
} else {
jQuery(parent).append( value );
}
});
} else {
return this.pushStack( jQuery(jQuery.isFunction(value) ? value() : value), "replaceWith", value );
}
@@ -466,7 +466,7 @@ test("insertAfter(String|Element|Array<Element>|jQuery)", function() {
});

var testReplaceWith = function(val) {
expect(12);
expect(14);
jQuery('#yahoo').replaceWith(val( '<b id="replace">buga</b>' ));
ok( jQuery("#replace")[0], 'Replace element with string' );
ok( !jQuery("#yahoo")[0], 'Verify that original element is gone, after string' );
@@ -491,6 +491,13 @@ var testReplaceWith = function(val) {
var set = jQuery("<div/>").replaceWith(val("<span>test</span>"));
equals( set[0].nodeName.toLowerCase(), "span", "Replace the disconnected node." );
equals( set.length, 1, "Replace the disconnected node." );

var $div = jQuery("<div class='replacewith'></div>").appendTo("body");
$div.replaceWith("<div class='replacewith'></div><script>" +
"equals(jQuery('.replacewith').length, 1, 'Check number of elements in page.');" +
"</script>");
equals(jQuery('.replacewith').length, 1, 'Check number of elements in page.');
jQuery('.replacewith').remove();
}

test("replaceWith(String|Element|Array&lt;Element&gt;|jQuery)", function() {

5 comments on commit 2a6de9a

@foxbunny

This comment has been minimized.

Copy link

foxbunny replied Oct 9, 2010

I've just gone trough the bug report, and also the dev group's archives. Since there is no way I can post a comment to either, I'll do it here. This patch does not fix all the cases. Im my case, I do replaceWith once, and it works. The second time I do it, it just appends new content right after the old one. And on all subsequent occasions. For example, let's say I have a

with ID of 'foo'

<p id='foo'></p>

On first $("#foo").replaceWith('<p id='foo'></p>'); I get the same thing:

<p id='foo'></p>

Next time I run $("#foo").replaceWith('<p id='foo'></p>'); I have:

<p id='foo'></p>
<p id='foo'></p>

And so on.

@jeresig

This comment has been minimized.

Copy link
Member Author

jeresig replied Oct 9, 2010

This appears to have been fixed: 51283d9

@foxbunny

This comment has been minimized.

Copy link

foxbunny replied Oct 11, 2010

Is that commit released? I'm seeing the above error in currently released version of jQuery.

@jeresig

This comment has been minimized.

Copy link
Member Author

jeresig replied Oct 11, 2010

@foxbunny: I'll need you to provide a better test case then (one that works within the context of the jQuery test suite - or one that runs on jsfiddle, or similar, because I'm unable to reproduce it.

@foxbunny

This comment has been minimized.

Copy link

foxbunny replied Oct 11, 2010

Okeydokey. As soon as I have some time, I'll take a look at the test case and see what I can do.

Please sign in to comment.
You can’t perform that action at this time.