用特定的id刪除元素。我的id來自於角度表達式嗎

[英]Remove element with specific id.. where my id comes from an angular expression


I am adding elements dynamically using an Angular directive as :

我使用角度指令動態地添加元素,如:

.directive('myNote',  function () {
    return {
        restrict:'E',
        scope:{
            delete: '&',
            note:'='
        },
        controller: function()
        {
            this.delete = function(){

            $('my-note').remove();
        };
        },
        controllerAs: 'noteCtrl',
        link:function (scope, element, attrs) {
            var $el = $(element);
            $el.draggable();
        },
        template: '<div class="note yellow" id={{note.id}}>' +                 
                  '<img ng-src="close.png" align="right" ng-click="noteCtrl.delete()">' +
                  '<br>'+
                  '<blockquote>'+
                  '<cite class="title">{{note.title}}</cite> <br><br> {{note.content}}' +
                  '</blockquote>' +             
                  '</div>'
    };
})

this way, the divs get added as div id=1, div id=2 and so on every time I add a my-note. I want to delete a specific note when i click on the img tag of the div. How can I achieve this?

這樣,每次添加my-note時,div id就被添加為div id=1、div id=2等等。當我點擊div的img標簽時,我想刪除一個特定的注意事項。我如何做到這一點?

P.S: $('my-note').remove(); removes all the notes. I only want to remove the note i clicked on.

P。S:$(“寄語”).remove();刪除所有的音符。我只想刪除我點擊過的注釋。

Here is the HTML as requested:

以下是所要求的HTML:

<ul>
 <li ng-repeat="note in notes">
  <my-note note="note" delete="deleteNote(note)"></my-note>
 </li>
</ul>

1 个解决方案

#1


2  

Don't use an inline onclick= handler. Do it "the jQuery way" using a delegated event handler (attached to a non-changing ancestor element):

不要使用內聯onclick= handler。使用委托事件處理程序(附加到不變的祖先元素)“jQuery方式”完成:

First, add a class to the image button (and remove the onclick handler):

首先,向圖像按鈕添加一個類(並刪除onclick處理程序):

 '<div class="note yellow" id={{note.id}}>' +                 
              '<img ng-src="close.png" align="right" class="deleteme">' +
              '<br>'+
              '<blockquote>'+
              '<cite class="title">{{note.title}}</cite> <br><br> {{note.content}}' +
              '</blockquote>' +             
              '</div>'

Then add a delegated event handler to a common ancestor:

然后將委托事件處理程序添加到共同的祖先:

$(document).on('click', '.deleteme', function(){
   $(this).closest('.note').remove();
});

The this of the handler will be the image/button, so you then just find the item you want to remove using closest(). In your case that is the element with class="note".

這個處理程序的這個將是image/button,因此您只需使用latest()找到要刪除的項。在您的例子中,它是class="note"的元素。

Notes:

  • Delegated event handlers work by listening for the event (click) to bubble up to a common ancestor. document is the best default if nothing else is closer/convenient. They then apply the jQuery selector, at event time, to the elements in the bubble-chain. It then applies your function, to only the matching elements that caused the event. The this value passed to the event function will be the matched item that was clicked.
  • 委托事件處理程序的工作方式是監聽事件(單擊)以冒泡到一個共同的祖先。如果沒有其他更接近/方便的東西,文檔是最好的默認。然后,在事件發生時,將jQuery選擇器應用到冒泡鏈中的元素。然后,它只將函數應用到導致事件的匹配元素上。傳遞給事件函數的這個值將是被單擊的匹配項。
  • inline handlers (like onclick="") separate your event registration from the event handler for no benefit.
  • 內聯處理程序(如onclick=")將您的事件注冊從事件處理程序中分離出來,沒有任何好處。
  • You should try chose the closest common ancestor, to the elements, as the target of the delegated event. Even though document is one level higher, it is a better default than body as body can fail in certain circumstances.
  • 您應該嘗試選擇最接近元素的共同祖先作為委托事件的目標。盡管文檔是一個級別更高,但它是比身體更好的默認,因為在某些情況下,身體可能會失敗。
  • Delegated events are faster to connect than individual event handlers. The trade-off is a slight reduction in speed at event time, but (and it's a big but), the speed difference at event time will never be noticed because you cannot click a mouse 50,0000 times per second :)
  • 委托事件比單獨的事件處理程序連接得更快。在事件發生時,交換速度會稍微降低,但是(這是一個很大的問題),在事件時間內的速度差異不會被注意到,因為你不能在每秒鍾點擊50,0000次鼠標。

Update (based on HTML added):

As you have a parent UL for the notes, change your HTML to have an ID on the UL and target that:

由於您有一個用於注釋的父UL,請將您的HTML更改為UL上的ID,目標為:

e.g.

如。

<ul id="mynotes">
 <li ng-repeat="note in notes">
  <my-note note="note" delete="deleteNote(note)"></my-note>
 </li>
</ul>

then the code becomes

然后代碼變得

$('#mynotes').on('click', '.deleteme', function(){
   $(this).closest('.note').remove();
});

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/01/21/a828552d09fa748a6acba1f2bb946150.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com