Удаление тега из добавленного элемента по его классу / идентификатору

У меня есть следующий код, и я не могу удалить ранее добавленный текст "Вы сейчас редактируете это", удаленный из 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>

Источник

2 ответа

Решение

Вам придется выбрать .yaet по классу и удалить их. Поскольку вы хотите использовать jqLite, вам придется выбирать элементы вручную, например, так:

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>

Источник

Я думаю, что это невозможно без 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();
Источник
Другие вопросы по тегам