javascript - 防止仅使用子伪选择器的默认功能

Question

每次用户单击链接（“.add-event”）时，我都使用 jQuery 动态添加元素。如果用户选择，此元素中还包括一个图标，用于删除整个元素。如果元素是页面上的最后一个元素，我想隐藏或禁用此删除图标。这是我到目前为止所尝试的：

$(document).on('click','.close_box2:only-child',function(){
    event.preventDefault();
});

和

if( $('.event').length===1) {
    $('.close_box2').hide()
}

HTML：

<div class="event">
    <span class="close_box2"><i class="icon-remove"></i></span>
     <span class="add-event">Add Event</span>
</div>

我究竟做错了什么！？谢谢

Answer 1

JSFiddle：http: //jsfiddle.net/TrueBlueAussie/KPY9r/6/

您只想检查删除处理程序中的“最后一个”：

// initial hide of sole close button
$('.close_box2').hide();

// On add, clone the template and show all close buttons
$(document).on('click', '.add-event', function () {
    // Create a new event based on the template
    $('#events').append($('#template').html());
    // Show all close buttons (as we must now have > 1 event)
    $('.close_box2').show();
});

$(document).on('click', '.close_box2', function (e) {
    $(this).closest('.event').remove();
    // Is there only one left?
    if ($('.event').length === 1) {
        // Hide the close box on the last event
        $('.close_box2').hide()
    }
});

笔记：

• 我使用一个虚拟<script>元素来保存 HTML 模板。这比克隆页面上的元素要好得多，也比代码中的内联 HTML 字符串要好得多。

Answer 2

以下在性能方面看起来更好：

$('.close_box2:only-child').on('click', function(event){
  event.preventDefault();
});