remove span by class from $(this).html()

Question

Basically my search returns search results in spans, then when one is clicked, a new span is added to another div with a select input and hidden input so all the selected features can be posted as an array.

My question is, $(this).html() now includes a span of class alias_span. Which I don't want to appear in the new span. How do I remove it before inserting the contents of the clicked span into the new span

$(".minisearch_res").live('click', function() { 

    // when a search result is clicked we disable the submit button, 
    // append a span to the left column with an id, 
    // a select input to select standard/optional and
    // a hidden field with the required information to save and something to 
    // show the user


    var id = $(this).attr('id');

    var html = "<span class= \"added_result_cont\" id=\"" + id + "_cont\">";
    html += "<select name='" + id + "_sel'>";
    html += "<option value=\"none\" selected=\"selected\"></option>";
    html += "<option value=\"std\">Standard</option>";
    html += "<option value=\"opt\" >Optional</option>";
    html += "</select>";
    html += "<span id= \"" + id + "\" class=\"added_result\">";
    html += "<input type=\"hidden\" name=\"selectedfeat[]\" value=\"" + id + "\">";
    html += $(this).html() + "</span></span>";

    $('#div_apply_to').append(html);

    $(this).remove();
    $('#search_input').trigger('keyup');
    $("input[type=submit]").attr("disabled", "disabled");
});

Update: here's the html of the span

<span class="minisearch_res" id="opt_1">Anti-Lock Brakes<br><span style="padding-left:20px" class="alias_span"><i>abs</i></span><br></span>

How about showing the HTML that you're attempting to describe? — Tom Walters, Dec 24 '12 at 09:01
be careful with this code. it doesn't look like you're validating anything — Ryan, Dec 24 '12 at 09:06
using user input to search a database. The span that is being clicked here is a sample search result. — Kelly Larsen, Dec 24 '12 at 09:53

score 0 · Answer 1 · answered Dec 24 '12 at 09:16

0

<div></div>

Add it to the dom, then remove it.

var htm = (
    '<span class="foo">foo</span>' +
    '<span>bar</span>' +
    '<span>bar</span>' +
    '<span>bar</span>' +
    '<span>bar</span>'
);

var $el = $("div").append(htm);
console.log($el.html());
$el.find('.foo').remove();
console.log($el.html());

http://jsfiddle.net/chovy/w2HdE/

answered Dec 24 '12 at 09:16

chovy

72,281
52
227
295

is this removing the instance of .foo from just the html being handled? or all instances of .foo on the page? – Kelly Larsen Dec 24 '12 at 09:26
this adds .foo to the div and then remvoes it later. Not sure why doesn't work in IE – chovy Dec 24 '12 at 19:10
after a bit of research, this explains why it doesn't work http://stackoverflow.com/questions/7585351/testing-for-console-log-statements-in-ie – Kelly Larsen Dec 25 '12 at 02:15

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

Got a tidy cross browser solution, which I'm very proud of :)

var temp = $(this);
temp.children('.alias_span').remove();
 $('#div_apply_to').append("...html..." + temp.html() + "...html...");

inspiration came from here: Remove element from Ajax Response

edited May 23 '17 at 12:06

Community

1
1

answered Dec 25 '12 at 02:24

Kelly Larsen

963
1
14
30

remove span by class from $(this).html()

2 Answers2