[英]Vue ToDo List, Target parent array list item of the button that is clicked
[英]How to target parent of button item to remove it?
我可以用
$(this).remove();
定位並刪除“讀取”按鈕,但是我實際上要定位div中的所有元素。 我認為必須使用.parent來完成此操作,但是我似乎無法使其正常工作?
_.each(Badges, function(item)
{
var wrapper = $('<div></div>');
wrapper.append('<img id="share_button" class="images responsive-image BadgeImgOutline" src="' + item.imageURL + '" />');
wrapper.append('<div type="button" class="wrapper portfolio-item-thumb one-third btn_badges btn-danger_badges mrs read">' + 'Remove kudosoo' + '</div>' + '<br>' + '<div class="wrapper b_seperater"></div>' + '<br>');
$('#container').append(wrapper);
wrapper.children('.read').click(function()
{
item.fetchedObject.set("B_Notify", "Read");
$(this).remove();
item.fetchedObject.save(null,
{
success: function(results)
{
console.log("Read");
},
只是改變
$(this).remove();
至
$(this).parent().remove();
例:
['testing', 'one', 'two', 'three'].forEach(function(item) { var wrapper = $('<div></div>'); wrapper.append('<div type="button" class="wrapper portfolio-item-thumb one-third btn_badges btn-danger_badges mrs read">' + 'Remove ' + item + '</div>' + '<br>' + '<div class="wrapper b_seperater"></div>' + '<br>'); $('#container').append(wrapper); wrapper.children('.read').click(function() { $(this).parent().remove(); }); });
#container > div { border: 1px solid black; padding-top: 2px; } .read { cursor: pointer; }
<div id="container"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
附注:我不會勾click
的每一個項目這樣。 相反,我只是使用植根於容器中的事件委托:
// Handle clicks - handler is only fired if the click // passed through a `.read` element en route to the // container $("#container").on("click", ".read", function() { $(this).parent().remove(); }); // Add items ['testing', 'one', 'two', 'three'].forEach(function(item) { var wrapper = $('<div></div>'); wrapper.append('<div type="button" class="wrapper portfolio-item-thumb one-third btn_badges btn-danger_badges mrs read">' + 'Remove ' + item + '</div>' + '<br>' + '<div class="wrapper b_seperater"></div>' + '<br>'); $('#container').append(wrapper); });
#container > div { border: 1px solid black; padding-top: 2px; } .read { cursor: pointer; }
<div id="container"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.