用特定的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