Удалить элемент в масонстве «Удалить Method», нажав на кнопку

Question

Обзор:

Я использую Кладка Каскадное библиотеки макета сетки и добавления Кладка Удалить метод. Этот метод позволяет нажимать на любую деталь изделия -> удалить его -> и прекрасно укладывается в макет.

Выпуск:

Я хотел бы, чтобы удалить элемент (<div class="item 1"></div> «розовый ящик») только, нажав на определенную область (т.е. кнопки) в рамках пункта.

Я попытался манипулировать функцией в файле JavaScript, но не смог найти решение моей проблемы. (Я начал в первый раз, чтобы построить какой-то веб-сайт 2month назад, так что очень мало опыта в 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, поскольку я не знаю, если это reall y необходимо удалить элемент, нажав кнопку. Просто отрегулировать ваш Fiddle с:

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

Если у вас уже есть .remove-BTN в реальной DOM, это не нужно делегировать клик-событие для кнопки .remove от $ (документ), так если это так, это может быть упрощено до

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

скорректированной Fiddle для этой версии.