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');
}
});
}
});