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

【问题标题】：remove list items added via .append by click event on separate element通过单独元素上的单击事件删除通过 .append 添加的列表项
【发布时间】：2012-08-22 12:24:32
【问题描述】：

我有以下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>' );
        }
    }
});

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

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

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

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

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

【问题讨论】：

您的代码似乎运行良好：jsfiddle.net/DgqMh。是否触发了点击事件？您是否尝试在其中添加alert 或console.log？
谢谢 Joao，你的权利。该代码在浏览器中工作。考虑到它使用的平台，我没有意识到我会遇到问题。

标签： jquery ios click append cordova

【解决方案1】：

<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。

【讨论】：

【解决方案2】：

您的代码很好，但是 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;
    });

【讨论】：