通过类/ ID

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的替代方案是

$（＆＃34; .yeat＆＃34;）。remove（），但是你正在调用$（element）.remove（）。

如果jQuery是你的对手你应该尝试vanilla 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();
});

＆＃13;

＆＃13;

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'
  }];
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;