Diskuze: odstranění položek pomocí class v JS /Angular

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Filip Janecek

Člen

Filip Janecek:4.9.2019 19:21

Ahoj!
Nevím si rady s mazáním položek seznamu
Pokud to pomůže, zde je celý kód:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <style>
        .hotovo-true {
            text-decoration: line-through;
            color: blue;
        }
        ul li {
            list-style-type: none;
        }
    </style>
</head>
<body>

<div ng-app="nakupniApk">
    <h1>Nákupní seznam</h1>
    <div ng-controller="nakupniSeznam">
        <span>Počet položek: {{polozkas.length}}</span>
        <ul>
            <li ng-repeat="polozka in polozkas">
                <label>
                    <input type="checkbox" ng-model="polozka.hotovo">
                    <span class="hotovo-{{polozka.hotovo}}">{{polozka.text}}</span>
                </label>
            </li>

        </ul>
        <form ng-submit="vlozPolozku()">
            <input type="text" ng-model="textPolozky" size="30" placeholder="Nová položka">
            <input type="submit" value="Vytvořit">
        </form>

        <input type="submit" ng-submit="vymazPolozku()" value="Vymazat">
    </div>
</div>
<script>
    var apk = angular.module('nakupniApk',[]);
    apk.controller('nakupniSeznam', function($scope) {
        $scope.polozkas = [{text:'Banány', done: true, }, {text:'Pomazánkové máslo', done: false}];
        $scope.vlozPolozku = function(){
            if($scope.textPolozky !== '') {
                $scope.polozkas.push({text:$scope.textPolozky, done: false,});
            }
        };
        $scope.vymazPolozku = function () {
            var item = document.getElementsByClassName("hotovo-true");
            item.parentNode.removeChild(item);
             /*var del = angular.element(document.querySelector(".hotovo-true"));
             del.empty();*/
             /*del.innerHTML = "Hello World!";
             while(del.length > 0 ){
                 del.parentNode.removeChild(del);
             }*/
        };
    });

</script>

</body>
</html>

Zkusil jsem: Cyklus while:

$scope.vymazPolozku = function () {
           var del = document.getElementsByClassName("hotovo-true");
           while(del.length > 0){
               del[0].parentNode.removeChild(del[0]);
           }

       };

Pomocí Angular:

ar del = angular.element(document.querySelector(".hotovo-true"));
             del.empty();

Chci docílit: Snažím se o to, aby byly přeškrtnuté položky po stisknutí tlačítka "Vymazat" opravdu vymazány.

Odpovědět

4.9.2019 19:21

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.

Nejčastěji vyhledáváné

Diskuze: odstranění položek pomocí class v JS /Angular