Illustrer la gestion d'évènements

css/styles.css

@@ -9,6 +9,7 @@ body {
 	padding: 30px;
 	width: 600px;
 }
+input[type="submit"],
 button {
   padding: 10px;
   color: white;

index.html

@@ -19,6 +19,10 @@
         span,
         button {
             margin: 5px;
+            box-sizing: border-box;
+        }
+        .bordure-flashy {
+            border: 2px solid red;
         }
         </style>
     </head>
@@ -29,19 +33,28 @@
 
         <!-- Add your site or application content here -->
         <div class="container">
-        <a href="#" class="main">lien 1</a> <a href="#">lien 2</a>
-
-        <h2>DOM</h2>
-            <span>Produit 1a</span><button class="blue" id="monBouton1a">Supprimer</button><br>
-            <span>Produit 1b</span><button class="blue" id="monBouton1b">Supprimer</button><br>
-            <span>Produit 1c</span><button class="blue" id="monBouton1c">Supprimer</button><br>
-            <span>Produit 1d</span><button class="blue" id="monBouton1d">Supprimer</button><br>
-            
+        <!-- <a href="#" class="main">lien 1</a> <a href="#">lien 2</a> -->
+
         <h2>jQuery</h2>
-            <span>Produit 2a</span><button class="red" id="monBouton2a">Supprimer</button><br>
-            <span>Produit 2b</span><button class="red" id="monBouton2b">Supprimer</button><br>
-            <span>Produit 2c</span><button class="red" id="monBouton2c">Supprimer</button><br>
-            <span>Produit 2d</span><button class="red" id="monBouton2d">Supprimer</button><br>
+            <form id="formNouveauProduit">
+                <input id="nomProduit" name="nomProduit" type="text" />
+                <input type="submit" class="blue" value="Ajouter" />
+            </form>
+
+            <div id="produits">
+                <div>
+                    <span>Produit 2a</span><button class="red" id="monBouton2a">Supprimer</button>
+                </div>
+                <div>
+                    <span>Produit 2b</span><button class="red" id="monBouton2b">Supprimer</button>
+                </div>
+                <div>
+                    <span>Produit 2c</span><button class="red" id="monBouton2c">Supprimer</button>
+                </div>
+                <div>
+                    <span>Produit 2d</span><button class="red" id="monBouton2d">Supprimer</button>
+                </div>
+            </div>
         </div>
         <script src="js/vendor/modernizr-3.5.0.min.js"></script>
         <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
@@ -70,17 +83,37 @@
             //     buttons1[i].innerHTML = 'Remove';
             // }
 
-            $('.red,.blue')
+            $('.red')
             .html('Remove')
             .removeClass('red')
             .addClass('green');
 
-            $('a')
-            .find('.main')
-            .css({
-                'text-decoration': 'none',
-                color: 'green'
-            });
+            $('button')
+            .click(
+                function(event) {
+                    var button = $(this);
+                    var row = button.parent();
+                    row.remove();
+                }
+            )
+
+            $('#formNouveauProduit')
+            .submit(
+                function(event) {
+                    event.preventDefault();
+                    var nomProduit = $('#nomProduit').val();
+                    var ligneProduit = $('<div><span>' + nomProduit + '</span><button class="red">Supprimer</button></div>');
+                    ligneProduit.appendTo('#produits');
+
+                }
+            )
+
+            // $('a')
+            // .find('.main')
+            // .css({
+            //     'text-decoration': 'none',
+            //     color: 'green'
+            // });
 
           });
         </script>