Removing HTML tag from string with jQuery
jquery
Solution
var lbl = $("label");
var newLbl = $(lbl[0].outerHTML);
$("span", newLbl).remove();
alert(newLbl.text());
Problem
I have a form with several checkboxes and labels, most of the functionality is working correctly, but I'm having trouble getting the label value for the checkbox, while stripping out a span element inside the label: ``` <input type="checkbox" id="list-item-x" /> <label for="list-item-x"><span class="date">Oct 1</span> The checkbox label</label> ``` I want the `label` element, but without the `span.date`. How can I remove this? I've tried the following: ``` $('label').remove('span.date').text(); ``` That didn't work, neither did the following: ``` $('label').find('span.date').text(); ``` How can I only remove the `span` element, leaving the `label` text alone for later usage? Edit: Here's the whole (messy) code: ``` $('input.list-item-checkbox').live('click', function(){ var myself = $(this); var my_id = $(myself).attr('id').split('-', 3); my_id = parseInt(my_id[2]); var my_label = $(myself).parent().children('label').html(); var parent = $(myself).parents('.list-item'); if ($(this).is(':checked')) { $.ajax({ type: 'POST', url: CI.base_url + 'ajax/unfinished_item/', data: 'list-item=' + my_id, dataType: 'json', success: function(result){ if (result.status == 'ERROR') { alert('Could not edit item'); } else { var html_string = '<div class="list-item">' + ' <input type="checkbox" class="list-item-checkbox" id="list-item-' + my_id + '" /> ' + ' <label for="list-item-' + my_id + '">' + my_label + '</label>' + '</div>'; $(myself).parents('.list-finished').siblings('.list-items').append(html_string); $(myself).parents('.list-item-finished').remove(); // This is where I need to get the span element removed from the label } }, error: function(){ alert('No contact with server'); } }); } }); ```