按类别/标识从附加元素中删除标签

Question

我有以下代码，当用户移动以编辑其他内容时，无法从DOM中删除之前附加的文本“您正在编辑此内容”。 任何建议将不胜感激。 我也尝试避免使用jQuery，因为我认为可以使用jQLite来实现。 非常感谢。

 var editApp = angular.module('editApp', ['ngRoute']); editApp.directive('editInPlace', function() { return { restrict: 'EA', scope: { value: '=editInPlace' }, template: '<span ng-click="edit()" ng-bind="value"></span><input ng-model="value"></input>', link: function($scope, element, attrs) { // Let's get a reference to the input element, as we'll want to reference it. var inputElement = angular.element(element.children()[1]); // This directive should have a set class so we can style it. element.addClass('edit-in-place'); // Initially, we're not editing. $scope.editing = false; // ng-click handler to activate edit-in-place $scope.edit = function() { $scope.editing = true; // We control display through a class on the directive itself. See the CSS. element.addClass('active'); element.append('<b class="yaet">You are now editing this</b>'); // And we must focus the element. // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, // we have to reference the first element in the array. inputElement[0].focus(); }; // When we leave the input, we're done editing. inputElement.prop('onblur', function() { $scope.editing = false; element.removeClass('active'); element.remove('.yaet'); // This is bit that fails }); } }; }); editApp.controller('ContactsCtrl', function($scope) { $scope.contacts = [{ number: '+25480989333', name: 'sharon' }, { number: '+42079872232', name: 'steve' }]; }); 

 .edit-in-place span { cursor: pointer; } .edit-in-place input { display: none; } .edit-in-place.active span { display: none; } .edit-in-place.active input { display: inline-block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-route.min.js"></script> <div ng-app="editApp"> <div ng-controller="ContactsCtrl"> <h2>Contacts</h2> <br /> <ul> <li ng-repeat="contact in contacts"> <span edit-in-place="contact.number"></span> | <span edit-in-place="contact.name"></span> </li> </ul> <br /> <p>Here we repeat the contacts to ensure bindings work:</p> <br /> <ul> <li ng-repeat="contact in contacts"> {{contact.number}} | {{contact.name}} </li> </ul> </div> </div> 

Answer 1

我认为没有jQuery是不可能的，因为jQLite不知道按类选择器。

也

  element.remove('.yaet'); // This is bit that fails

调用element.remove（），函数remove没有任何参数，因此您要删除实际的元素。

jQuery中的替代方案是

$（“。yeat”）。remove（），但是您正在调用$（element）.remove（）。

如果jQuery是您的敌人，则应尝试使用香草JS

 var elements = document.querySelectorAll(".yaet");
 elements.remove();

Answer 2

您将必须按类别选择.yaet并将其删除。 由于要使用jqLit​​e，因此必须手动选择元素，例如：

inputElement.prop('onblur', function() {
    $scope.editing = false;
    element.removeClass('active');
    angular.element(element[0].querySelector('.yaet')).remove();
});

 var editApp = angular.module('editApp', ['ngRoute']); editApp.directive('editInPlace', function() { return { restrict: 'EA', scope: { value: '=editInPlace' }, template: '<span ng-click="edit()" ng-bind="value"></span><input ng-model="value"></input>', link: function($scope, element, attrs) { // Let's get a reference to the input element, as we'll want to reference it. var inputElement = angular.element(element.children()[1]); // This directive should have a set class so we can style it. element.addClass('edit-in-place'); // Initially, we're not editing. $scope.editing = false; // ng-click handler to activate edit-in-place $scope.edit = function() { $scope.editing = true; // We control display through a class on the directive itself. See the CSS. element.addClass('active'); element.append('<b class="yaet">You are now editing this</b>'); // And we must focus the element. // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, // we have to reference the first element in the array. inputElement[0].focus(); }; // When we leave the input, we're done editing. inputElement.prop('onblur', function() { $scope.editing = false; element.removeClass('active'); angular.element(element[0].querySelector('.yaet')).remove(); }); } }; }); editApp.controller('ContactsCtrl', function($scope) { $scope.contacts = [{ number: '+25480989333', name: 'sharon' }, { number: '+42079872232', name: 'steve' }]; }); 

 .edit-in-place span { cursor: pointer; } .edit-in-place input { display: none; } .edit-in-place.active span { display: none; } .edit-in-place.active input { display: inline-block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-route.min.js"></script> <div ng-app="editApp"> <div ng-controller="ContactsCtrl"> <h2>Contacts</h2> <br /> <ul> <li ng-repeat="contact in contacts"> <span edit-in-place="contact.number"></span> | <span edit-in-place="contact.name"></span> </li> </ul> <br /> <p>Here we repeat the contacts to ensure bindings work:</p> <br /> <ul> <li ng-repeat="contact in contacts"> {{contact.number}} | {{contact.name}} </li> </ul> </div> </div>