javascript - 仅在使用 jquery 检查后才在 div 之前添加元素

Question

我在按钮单击的 div 之前添加一个标签，如下所示:

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

其中.deletebutton是一个div。但我看到多次点击会添加多个标签。我想检查 div 之前是否已经存在标签。如果是这样，我不想再添加一个。

我的 HTML 结构是这样的:

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

请提出建议

[更新]有更好的解决方案吗？这对我有用

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

如果我们想检查 parent 怎么办:

@silentw 如果每次 .deletebutton 周围都添加一个 div 怎么办？

我使用了以下代码，但它不起作用:

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

更新

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

DEMO 2