NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Avatar
Filip Janecek
Člen
Avatar
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.