Fehler beim Lesen des richtigen $ (this) -Elements, das an eine Liste angehängt werden soll

Question

Ich habe ein Div-Feld, das beim Anklicken ein Dropdown-Menü erstellt. Wenn Sie auf die Auswahloptionen klicken, wird der Name in das div-Feld #proposal-type verschoben. Sie können weiter klicken, um weitere Optionen hinzuzufügen.

Mein Problem ist, wenn ich auf das x klicke, um die Wahl zu entfernen, kann ich nicht herausfinden, wie man das gesamte drop-item, das gerade war, zum Entfernen und füllen Sie wieder in die Dropdown-Liste. Im Moment geht nur das x zurück in die Optionsliste.

Hat jemand irgendwelche Ideen?

Könnte auch jemand bitte einen kurzen Hinweis darauf teilen, wie man die Optionsboxliste verschwinden lässt, wenn ich außerhalb davon klicke? Es bleibt einfach dort, egal was gerade passiert.

Here is a fiddle.

$('#proposal-type').click(function() { 
 
    $('#proposal-type-drop').addClass('active'); 
 
}); 
 
$('#proposal-type').text("Type of Project *"); 
 
$('.drop-item-input').on('change', function() { 
 
    var proposalVal = ""; 
 
    var proposalHtml = ""; 
 
    $('.drop-item-input').each(function() { 
 
    if ($(this).is(":checked")) { 
 
     proposalVal += $(this).val(); 
 
     proposalHtml += '<div class="drop-item-selected"><span class="drop-item-close"></span>' + $(this).val() + '</div>'; 
 
     $(this).closest('label').fadeOut(); 
 
    }; 
 
    //else if ($(this).is(":checked") === false) { 
 
    // \t $(this).closest('label').fadeIn(); 
 
    //}; 
 
    $('#proposal-type').val(proposalVal).html(proposalHtml); 
 
    $('#proposal-type-drop').removeClass('active'); 
 
    }); 
 
    //values 
 
    var type = $('.drop-item-input:checked').map(function() { 
 
    return $(this).val(); 
 
    }).get().join(', '); 
 
    console.log(type); 
 
}); 
 
$(document).on('click', '.drop-item-close', function() { 
 
    console.log("Triggered"); 
 
    $(this).fadeOut("medium", function() { 
 
    $(this).detach().appendTo('#proposal-type-drop').fadeIn(); 
 
    }); 
 
    $(this).is(":checked") === false; 
 
    $(this).closest('label').fadeIn(); 
 
    $(this).closest('.drop-item-selected').fadeOut(); 
 
});

.panel-input { 
 
    box-sizing: border-box; 
 
    border: 1px solid #858585; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 45%; 
 
    margin: 1.5% 2% 2.5% 2%; 
 
} 
 

 
.proposal-input { 
 
    width: 100%; 
 
} 
 

 
#proposal-type-drop { 
 
    width: 45%; 
 
    display: none; 
 
    position: absolute; 
 
} 
 

 
#proposal-type-drop.active { 
 
    background: rgba(0, 0, 0, 1); 
 
    display: block; 
 
    height: auto; 
 
    z-index: 1; 
 
} 
 

 
.drop-item { 
 
    color: #FFF; 
 
    font-size: 1rem; 
 
    padding: 7px 5px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    background: rgba(0, 0, 0, .8); 
 
    display: block; 
 
    width: 100%; 
 
    cursor: pointer; 
 
} 
 

 
.drop-item-input { 
 
    display: none; 
 
} 
 

 
.drop-item-selected { 
 
    background: #0085A1; 
 
    color: #333333; 
 
    padding: 5px; 
 
    font-size: .9rem; 
 
    font-weight: bold; 
 
    font-family: 'Roboto', sans-serif; 
 
    width: auto; 
 
    display: inline-block; 
 
    margin: 0 3px; 
 
} 
 

 
.drop-item-close { 
 
    display: inline-block; 
 
    background-image: url("http://www.clipartbest.com/cliparts/dT8/xnA/dT8xnAqAc.png"); 
 
    background-size: 10px 10px; 
 
    background-repeat: no-repeat; 
 
    height: 10px; 
 
    width: 10px; 
 
    margin-right: 10px; 
 
    cursor: pointer; 
 
    transition: ease 0.1s; 
 
    -webkit-transition: ease 0.1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="panel-input"> 
 
    <div id="proposal-type" class="proposal-input"></div> 
 
    <div id="proposal-type-drop"> 
 
    <label class="drop-item">Apple<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Apple"></label> 
 
    <label class="drop-item">Banana<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Banana"></label> 
 
    <label class="drop-item">Cake<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Cake"></label> 
 
    </div> 
 
</div>

Answer 1

ein paar Probleme hier Es gibt, dass ich richtig versucht habe zu. Ich sollte Sie aber gleich von Anfang an warnen, das fühlt sich sehr zerhackt an, da ich nicht versuchen wollte, Ihren Code neu zu schreiben. Vielleicht möchten Sie einen anderen Ansatz sehen, vielleicht ohne Checkboxen zu verwenden, da sie das System zu kompliziert machen.

Die erste Ausgabe ist wie James in seinem Kommentar sagte, dass der Grund, bist du nur das Kreuz immer in der Dropdown-Liste angezeigt ist darauf zurückzuführen das Kreuz mit $(this) um die Auswahl, wenn Sie tatsächlich sind für die Eltern suchen , erreichbar durch $(this).parent().

Die zweite Ausgabe ist, dass in der zweiten JSFiddle, Ihnen die erste Ausgabe korrigiert haben, aber Ihr Code nicht ganz funktioniert, sind da Sie jetzt eine andere Art von Element eingefügt, das kein enthält Kontrollkästchen in Ihr Dropdown-Element, was zu einem ganzen Haufen Ärger führt, wenn Sie versuchen, darauf zu klicken. Um dieses Problem zu beheben, fügen Sie wie in einem vorherigen Abschnitt Ihres Codes ein neues HTML-Element ein und entfernen das alte Element in der Liste. Daraus folgt die folgende Änderung an Ihrer .drop-item-close eventListener-Methode;

$("#proposal-type-drop input[value='"+$(this).parent().text()+"']").remove(); 
$("#proposal-type-drop").append('<label class="drop-item">'+$(this).parent().text()+'<input type="checkbox" name="prop-type[]" class="drop-item-input" value="'+$(this).parent().text()+'"></label>').fadeIn(); 
$(this).parent().detach(); 

Dies bringt uns zu unserer dritten Ausgabe wie jetzt haben wir ein neues Element erzeugt, und es sieht gut aus in der Dropdown-Liste, aber es wird nicht zu Ihren vorherigen .drop-item-input eventlistener reagieren. Wir müssen diesen Listener so modifizieren, dass er auch dynamisch hinzugefügte Elemente auf folgende Weise bewältigt:

$(document).on('change', '.drop-item-input', function() { 
    /* Rest of your code */ 
}); 

Hier ist eine aktualisierte JSFiddle diese Änderungen enthalten, und es sollte funktionieren, wie Sie beabsichtigten.