Adding element before div only after checking using jquery

Question

I am adding a label before a div on button click like this:

$(".deletebutton").before("<label></label>");

where .deletebutton is a div . But I see that with multiple clicks multiple labels are added. I want to check if a label exists before the div already. If it does I don't want to add another one.

My HTML structure is this:

<li>
    <label></label>
    <div class="deletebutton"></div>
<li>

Please suggest

[UPDATE] any better solution ? This worked for me

if ($(".deletebutton").prev().get(0).tagName != 'LABEL') {
    $(".deletebutton").before("<label></label>");
} else {
    $(".deletebutton").prev().remove();
    $(".deletebutton").before("<label></label>");
}

what if we want to check for parents:

@silentw what if there is a div added each time around .deletebutton ?

i used following code but it is not working:

var parentTag = $(".ruRemove").parent().get(0).tagName;

if (parentTag == 'LI') {
    $(".ruRemove").wrap("<div class='data deletebutton'></div>");
    $(".deletebutton").before("<label></label>");
} else {

    var par = $('.deletebutton').parent();
    if (par.is('div')) par.remove();
    $(".ruRemove").wrap("<div class='data deletebutton'></div>");

    var prev = $('.deletebutton').prev();
    if (prev.is('label')) prev.remove();
    $('.deletebutton').before("<label></label>");
}

<label> </label>
<div class="deletebutton">
    <label> </label>
    <div class="deletebutton">
        <label> </label>
        <div class="deletebutton">
        </div>
    </div>
</div>

Answer 1

$(".deletebutton").on('click', function() {
    if(!$(this).prev().is('label')) $(this).before("<label>A</label>");
});

DEMO

Update

$(".deletebutton").on('click', function() {
    var prev = $(this).prev();
    if(prev.is('label')) prev.remove();
    $(this).before("<label>This is a label</label>");
});

DEMO 2