2
Ich habe eine Aufgabenliste und ich habe Probleme beim Entfernen einer einzelnen Position, wenn die Schaltfläche Löschen gedrückt wird. Mit meinem aktuellen Code wird nur die eigentliche Lösch-Schaltfläche und nicht das Listenelement entfernt. Jede Hilfe wird geschätzt, danke.jQuery- So zielen Sie nur ein einzelnes Listenelement zum Entfernen
Ziel: Bewegen Sie den Mauszeiger über ein Listenelement und drücken Sie auf das Entfernen-Symbol, um es aus der Liste zu entfernen.
$(document).ready(function(){
\t //Declare variables
\t var $newItem = $('#newItem');
\t var $addBtn = $('#addBtn');
\t var $textField = $('#textField');
\t var $textAddForm = $('#textAddForm');
\t var $wrapper = $('#wrapper');
\t var $list = $('ul');
\t var $glyph = $('.glyphicon')
\t //hide the Add form until it's needed and put focus on newItem
\t $textAddForm.hide();
\t $newItem.focus();
\t //hide draggable tooltip on mouseover
\t $wrapper.mouseover(function() {
\t \t $('#draggable').fadeOut(1000);
\t });
\t //Make the list draggable
\t $wrapper.draggable();
\t $wrapper.resizable();
\t //Hides the newItem button and adds the text field and add button
\t $newItem.on('click', function(){
\t \t $newItem.hide();
\t \t $textAddForm.show();
\t \t $textField.focus();
\t });
\t //Grabs the submission from Add Item
\t $textAddForm.on('submit', function(e){
\t \t var grabText = $textField.val();
\t \t var $listItems = $('#listItems ul');
\t \t //disables page from submitting and appends the text to list
\t \t e.preventDefault();
\t \t $listItems.prepend('<li>' + grabText + '<span class="hidden glyphicon glyphicon-remove-sign"></span></li>');
\t \t //After inserting item, hides it and re-enable the New Item button
\t \t $newItem.show();
\t \t $textAddForm.hide();
\t \t $textField.val('');
\t \t $newItem.focus();
\t });
\t //Toggle complete
\t $list.on('click', 'li', function(){
\t \t var $this = $(this);
\t \t var copy = $(this).detach();
\t \t var hasComplete = $this.hasClass('complete');
\t \t $this.toggleClass('complete');
\t \t if (hasComplete === true) {
\t \t \t $this.remove();
\t \t \t copy.prependTo('ul');
\t \t }
\t \t else {
\t \t \t $this.remove();
\t \t \t copy.appendTo('ul');
\t \t }
\t });
\t //show Delete button on mouseover and remove if it's pressed
\t $list.on('mouseenter mouseleave', 'li' , function(){
\t \t var $this = $(this);
\t \t var $thisitem = $this.html();
\t \t console.log($thisitem);
\t \t $('.glyphicon', this).toggleClass('hidden');
\t \t $glyph.on('click', function(){
\t \t \t $thisitem.remove();
\t \t });
\t }); \t
}); //endbody {
\t text-align: center;
}
ul {
\t list-style-type: none;
\t background: orange;
}
h1, h2, li {
\t font-family: 'Indie Flower', cursive;
}
p {
\t font-family: 'Cabin', sans-serif;
\t font-size: 12px;
}
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
.glyphicon {
\t margin-right: 30px;
\t margin-top: 4px;
\t float: right;
}
.glyphicon:hover {
\t color: red;
}
.hidden {
\t visibility: hidden;
}
#logo {
\t margin-bottom: 30px;
}
#logo h1 {
\t margin: 0;
\t padding-bottom: 0;
}
#logo p {
\t margin: 0;
}
#wrapper {
\t border-style: solid;
\t width: 340px;
\t overflow: hidden;
\t margin: auto auto;
}
#newItem {
\t float: right;
\t margin-right: 20px;
\t margin-bottom: 20px;
}
#textField {
\t float: left;
\t margin-left: 20px;
}
#listItems {
\t margin-bottom: 30px;
\t text-align: left;
\t font-size: 22px;
}
.complete {
\t text-decoration: line-through;
}<!doctype html>
<html>
\t <head>
\t \t <link rel="stylesheet" href="style.css" />
\t \t <title>The little to do</title>
\t \t <meta carset="utf-8" />
\t \t <!-- Summon Fonts & Library-->
\t \t <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
\t \t <link href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
\t \t <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
\t \t <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
\t </head>
\t <body>
\t <div id="draggable">
\t \t <p>I'm draggable!</p>
\t </div>
\t <div id="wrapper">
\t \t <div id="logo">
\t \t \t <h1>Project Bacon</h1>
\t \t \t <p>The Electronic Shopping List</p>
\t \t </div><!--end logo-->
\t \t <div id="listTitle">
\t \t \t <h2>BUY GROCERIES</h2>
\t \t \t <div id="listItems">
\t \t \t \t <ul>
\t \t \t \t </ul>
\t \t \t </div><!--end listItems-->
\t \t \t
\t \t \t <form id="textAddForm">
\t \t \t \t <div>
\t \t \t \t \t <input id="textField" type="text" name="entry" placeholder="Add item...">
\t \t \t \t </div>
\t \t \t \t <div id="addBtn">
\t \t \t \t \t <input type="submit" name="addBtn" value="Add" type="button">
\t \t \t \t </div>
\t \t \t </form><!--end textAddForm-->
\t \t \t <div id="newItemForm">
\t \t \t \t <button id="newItem" type="button">New Item</button>
\t \t \t </div><!--end newItemForm-->
\t \t </div><!--end listTitle-->
\t </div><!--end wrapper-->
\t <!--Summon JS-->
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
\t <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
\t <script type="text/javascript" src="script.js"></script>
\t </body>
</html>
'else { \t \t \t $ this.remove(); \t \t \t copy.appendTo ('ul'); \t \t} 'Anwenden von Haltepunkt auf $ this.remove() spiegelt Ihr gewünschtes Ergebnis und die Anweisung danach wider, dass Ihr gewünschtes Verhalten es scheint. Wenn das irgendeinen Hinweis gibt. – Rikin