Question

I’m trying to manipulate some html which is in a textarea (not part of the page) but I want to be able to perform jQuery functions on it.

Here I am trying to remove the div with the attr ‘my_id’ of 1234, but the resulting data remains the same?

var data = "<div>something<div my_id='1224'>blah</div><div my_id='1234'>xx123</div></div>";

var id = '1234';

$(data).remove('[my_id="'+id+'"]');

alert($(data).html());

Obviously just using alert for debugging.

Answer 1

var data = "<div>something<div my_id='1224'>blah</div><div my_id='1234'>xx123</div></div>";

var id = '1234';

var $data = $(data);  // create elements from the string, and cache them

$data.find('[my_id="'+id+'"]').remove(); // find and remove the nested element

alert($data.html());  // alert the resulting HTML

1. You were giving .remove() a selector, which only works on top level elements. The targeted element is nested.

2. When you did alert($(data).html());, you were using the original string, which isn’t modified. You need to create the elements, reference the jQuery object, do your manipulation, then use that same jQuery object to see the result.