jquery - 通过单独元素上的单击事件删除通过 .append 添加的列表项

Question

我有以下html：

<div id="info">
    <div class="toolbar">
        <h1 class="popup-title"></h1>
        <a href="#map" class="back">Map</a>

    </div>

    <div class="categories rounded">
        <div class="column-one list-title">
            <h3>Categories</h3>

        </div>

        <div class="column-two list-items cats">
            <ul>

            </ul>

        </div>

    </div>
</div>

用这个 jquery 来填充 UL：

google.maps.event.addListener( marker, 'click', function () {
    for ( var i = 0; i < places.length; i++ ) {
        for ( var a = 0; a < places[i].categories.length; a++ ) {
            $( '#info .cats ul' ).append( '<li>' + places[i].categories[a] + '</li>' );
        }
    }
});

单击带有类的a标签时，.back我希望删除附加的列表项。

$( '.back' ).on( 'click', function () {
     $( '#info .cats ul' ).html( '' );
} );

不幸的是，列表项没有被删除，新的列表项只是不断地添加到旧的列表项中。我也试过：

$('#info .cats ul li').remove();

编辑：有关其他信息 - 既然我已经检查过了，它在浏览器中运行良好。该代码不会使用 jqtouch 在 ios 上清除 phonegap/cordova 中的“li”项目。这可能是平台交互的更深层次的问题。对于我要完成的工作，是否有一些替代代码解决方案？

Answer 1

您的代码很好，但 jQuery append 的最佳实践是使用字符串。

例如

var ulList = '';
    google.maps.event.addListener( marker, 'click', function () {
        for ( var i = 0; i < places.length; i++ ) {
           for ( var a = 0; a < places[i].categories.length; a++ ) {
              ulList += '<li>' + places[i].categories[a] + '</li>';
//$list.append( '<li>' + places[i].categories[a] + '</li>' );
           }
       }
$list.append(ulList);
ulList = null;
    });

Answer 2

<div id="info">
    <div class="toolbar">
        <h1 class="popup-title"></h1>
        <a href="#map" class="back">Map</a>
    </div>

    <div class="categories rounded">
        <div class="column-one list-title">
            <h3>Categories</h3>
        </div>

        <div class="column-two list-items cats"><ul></ul></div>

    </div>
</div>

Javascript

var $list = $( '#info .cats ul' );

google.maps.event.addListener( marker, 'click', function () {
    for ( var i = 0; i < places.length; i++ ) {
       for ( var a = 0; a < places[i].categories.length; a++ ) {
          $list.append( '<li>' + places[i].categories[a] + '</li>' );
       }
   }
});


$('.back').on( 'click' , function ( event ) {
     $list.empty();
     return false; //prevent the default anchor link action
});

您需要防止锚链接的默认操作。还要缓存选择器，这样您就不必每次都查询 DOM。