javascript - 通过单击按钮删除 Masonry “Remove Method” 中的项目

Question

概述:

我正在使用 Masonry Cascading 网格布局库并添加 Masonry Remove Method。此方法允许单击项目的任何部分 --> 删除它 --> 并很好地保持布局。

问题:

我想仅通过单击项目内的特定区域(即按钮)来删除项目(<div class="item 1"></div>“粉红框”)。

我尝试操作 JavaScript 文件中的函数，但未能找到问题的解决方案。 (我两个月前第一次开始建立一些网站，所以对 jS 或 jQ 的经验很少)

问题:

您知道如何解决这个问题吗？

这里是 jsfiddle 的链接，简要概述了我想要实现的目标:http://jsfiddle.net/intimur/SfU5T/22/

HTML

<div class="masonry">
 <div class="item 1"></div>  
 <div class="item 2">      
     <div class="remove-btn"> Click here to remove item </div>      
 </div>
</div>

JavaScript

// http://masonry.desandro.com/masonry.pkgd.js added as external resource
// added http://rawgithub.com/desandro/classie/master/classie.js

docReady( function() {

  var container = document.querySelector('.masonry');
  var msnry = new Masonry( container, {
    columnWidth: 200
  });

  eventie.bind( container, 'click', function( event ) {
    // don't proceed if item was not clicked on
    if ( !classie.has( event.target, 'item' ) ) {
      return;
    }
    // remove clicked element
    msnry.remove( event.target );
    // layout remaining item elements
    msnry.layout();
  });

});

Answer 1

我还没有检查 classie.js，因为我不知道是否真的需要通过单击按钮来删除该项目。刚刚调整了您的Fiddle与:

$(document).on('click', ".remove-btn", function () {
    msnry.remove($(this).parent(".item"));
    msnry.layout();
});

如果您在实际 DOM 中已经有了 .remove-btn，则无需将点击事件委托(delegate)给 $(document) 中的 .remove-button，因此如果是这种情况，可以简化为

 $(".remove-btn").click(function () {
    msnry.remove($(this).parent(".item"));
    msnry.layout();
});

调整Fiddle对于这个版本。