4

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.

Nick
  • 390
  • 2
  • 12
  • Your question has sloved here:[enter link description here](http://stackoverflow.com/questions/3331449/jquery-remove-element-from-string) – Water Jul 24 '16 at 16:09

2 Answers2

2
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.

RightSaidFred
  • 11,209
  • 35
  • 35
1

EDIT

Removing dom traversal of non-dom elements

Use the data prefix to put custom attributes on elements:

<div data-my_id='1224'

And then:

$(data).find('div[data-my_id="' + id + '"').remove();

Or more simply just use a regular id on the div you're targeting:

 <div id='1224'

Which can then be removed with:

$(data).find('#' + id).remove();
Adam Rackis
  • 82,527
  • 56
  • 270
  • 393
  • Did you test that before answering? – Nick Dec 02 '11 at 01:24
  • I guess I entered my first response without enough forethought – Adam Rackis Dec 02 '11 at 01:30
  • Sorry, but I've got to -1 this. You're trying to do DOM selections to find an element that isn't in the DOM. – RightSaidFred Dec 02 '11 at 01:31
  • @RightSaidFred - you're right, I fixed that, but I think the advice I gave him on using custom attributes was good. – Adam Rackis Dec 02 '11 at 01:34
  • Thanks guys, why was the use of my custom attribute selector incorrect? Or was it merely a matter of being more specific when putting the 'div' in-front? – Nick Dec 02 '11 at 01:41
  • @user1076568: It wasn't incorrect. I used your selector in my answer. But you needed to do a `.find()` to get the nested element. See point `1.`. – RightSaidFred Dec 02 '11 at 01:45
  • Yep roger that! Thanks again! – Nick Dec 02 '11 at 01:50
  • @RightSaidFred - isn't it bad form to use custom attributes like that? Won't that cause problems in certain circumstances? I'm not trying to argue, but I could have sworn I read/heard that somewhere – Adam Rackis Dec 02 '11 at 01:50
  • Well, maybe. Ultimately HTML5 allows for `data-` attributes, but in any browser that doesn't support them, they will be considered custom attributes anyway. But to future proof your code, `data-` attributes would be better. But yes, I think there may be some browser bugs, but jQuery takes care of those if so. – RightSaidFred Dec 02 '11 at 01:52
  • @RightSaidFred "but jQuery takes care of those if so" - indeed. – Adam Rackis Dec 02 '11 at 01:55
  • Yep, gotta know where the bugs are. Helps to know when it makes sense to use/not use jQuery. – RightSaidFred Dec 02 '11 at 01:56