Javascript 如何从指令中查找和删除DOM元素？

我想做我自己的标签maanger。我使用bootstrap typeahead并向该元素添加指令，并在select操作上收听广播

我找不到删除先前添加的标记元素的方法。我不能做两件事：传递我的suctom id并查找和删除这个DOm元素，即使id已知

你能帮忙吗

mainApp.directive("tagsManager", ['$compile', function($compile) {
    return {
        restrict: 'A',
        link: function( scope, element, attrs ) {
            console.log("Tags in directive: " + scope.tags);
            scope.$on('tags.new', function(event, tag) {
                console.log("New tag is arrived: " + tag.name);
                var templ = "<div class=\"btn btn-default\" ng-click=\"tagClick($event)\" id=\"tag.name\">tag.name</div>"
                    .replace(/tag.name/, tag.name).replace(/tag.name/, tag.name);
                var el = angular.element(templ);
                el.attr("bind-data", tag);
//                $scope.items = teamSharedObj.teams;
                $compile(el)(scope);
                element.after(el);
            });
            scope.tagClick = function (tag) {
                console.log("Tag: " + tag);
                // TODO find a way to get id of this element and rempve it
            }
        }
    }
}])

mainApp.directive（“tagsManager”，['$compile'，function（$compile）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
log（“指令中的标记：+scope.Tags”）；
作用域：$on（'tags.new'，函数（事件，标记）{
log（“新标签到达：+tag.name”）；
var temp=“tag.name”
.replace（/tag.name/，tag.name）。replace（/tag.name/，tag.name）；
var el=角度元素（模板）；
el.attr（“绑定数据”，标签）；
//$scope.items=teamSharedObj.teams；
美元（el）（范围）；
元素。在（el）之后；
});
scope.tagClick=函数（标记）{
console.log（“Tag:+Tag”）；
//TODO找到获取此元素的id并删除它的方法
}
}
}
}])

我会去掉您启动的指令，因为它可以很容易地替换为

ng repeat

，以及更简单的代码

在控制器中：

$scope.tags=[];
$scope.typeAheadOnSelect = function( tag){
    /* perhaps do an ajax update to server here? */
    $scope.tags.push(tag);     
}
/* example of removing from array */
$scope.deleteTag=function(tag){
   /*server update by ajax, then */
   $scope.tags.splice( $scope.tags.indexOf(tag), 1);
}

在标记中：

<div ng-repeat="tag in tags" ng-click="deleteTag(tag)" id="tag.name">{{tag.name}}</div>

{{tag.name}

---

请注意，仅对数据模型进行了修改，angular将在内部处理添加/删除DOM元素的操作。

您应该能够使用

$（this.attr（“id”）

其中

console.log

用于获取id，然后只要使用

.remove（）

即可在获得id后将其删除。可能可以使用

$（this）.remove（）

为什么不使用

ng repeat

来显示标记？然后，当您从数组中删除标记对象时，angular将负责从DOM中删除。这样就不需要指令中的大部分代码了。谢谢。我还没有考虑过这个问题。我需要在前面的输入字段中水平显示标记。您能告诉我如何使用您的方法实现这一点吗？我接受您的回答，但如果您能帮助我在输入字段中显示我的意图，我将不胜感激

input

不允许子项，但可以使用更改处理程序将更多标记推送到数组中