How to remove a particular html tag and its content which is inside a div, using div id by jquery?

Question

I have the following div tag, which will be created onload by jquery. I want to remove only the span tag and its contents which is being created inside the div. How can i do this using jquery ? I have tried innerHTML but it deletes all the contents of the div with id uniform-qualification, as I want to delete only the span tag below.

<div id="uniform-qualification" class="">
<span>BCh</span>
 </div>

Note : the span tag cannot be given with an id as its being created dynamically from the UI plugin

Answer 1

$("#uniform-qualification > span").remove();

but you'll need to provide more information if you want a more informed answer. For example, if you have more than one span but only want to remove the first one you'll need something like:

$("#uniform-qualification > span:eq(0)").remove();

Answer 2

To remove all span elements within the div try the following:

$('#uniform-qualification span').remove();

To remove only child span elements:

$('#uniform-qualification > span').remove();

To remove only the first child span element:

$('#uniform-qualification > span').first().remove();

Answer 3

$('#uniform-qualification').html('');

这样就可以了。