Entfernen geprüft Kontrollkästchen JQuery mit

Ich versuche, meine geprüft Kontrollkästchen entfernenEntfernen geprüft Kontrollkästchen JQuery mit

$(".gone").removeAttr('checked');

mit der Wenn Sie nach unten scrollen und klicken Sie + Add new Line es ein anderes <tr> anhängen wird. Was ich versuche zu tun, ist ein <tr> entfernen, wenn das Kontrollkästchen aktiviert ist. Wenn ich also mehrere Kästchen ankreuze, werden alle überprüften <tr>'s entfernt. Was mache ich falsch? Warum werden die Kontrollkästchen nicht mit dem obigen Code entfernt?

Dies ist mein anschauliches Beispiel: https://jsfiddle.net/nwqmvo36/17/

**** UPDATE ****

Versuchte

$(document).on("click", "div.rem", function() { 
    $(this).closest("tr:checked").remove(); 
});

entweder dies nicht funktioniert, verwenden. Ich versuche verschiedene Lösungen, ich verstehe einfach nicht, was ich falsch mache.

Quelle

2016-10-05 unlvt

Sie brauchen keine Veranstaltung Delegation zu verwenden. Dies ist sinnvoll, wenn Sie zum Beispiel Ereignis-Listener zu Elementen hinzufügen möchten, die anhängen, nachdem das DOM geladen wurde. In Ihrer Situation können Sie dem Element mit der Klasse .gone einen Ereignis-Listener hinzufügen und dann alle überprüften checkboxes finden und das übergeordnete Element tr entfernen. Sie können den folgenden Code verwenden:

$(".gone").on("click", function() { 
    $('.no-more-tables') // element container 
     .find(":checkbox:checked") // return checked checkbox(es) 
     .closest('tr') // return first parent tr 
     .remove(); // remove them 
});

Auch ein demo

Referenzen

2016-10-05 07:11:52

nette arbeit dort! – Fiido93

Vielen Dank für die Erläuterung des Vorgangs. – unlvt

Kann ich verhindern, dass der Header entfernt wird? – unlvt

Sie das Attribut checked entfernen, nicht das Objekt, müssen Sie die checked selector

versuchen, dies verwenden:

$(".gone:checked").remove();

Quelle

2016-10-05 00:41:22 Aschab

Dies funktioniert nicht für mich. – unlvt

Können Sie vielleicht ein Live-Beispiel zeigen? – unlvt

Hier habe ich für Sie einen Code aktualisiert. Sie rief nicht die Klasse der Kontrollkästchen

$(".checkAll").change(function() { 
 
    $(".selectall").prop('checked', $(this).prop("checked")); 
 
    $(".gone").removeAttr('checked'); 
 
}); 
 

 
$('.vv div:first-child').on('click', function(){ 
 
$("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" class="selectall" /></td><td><span class="hdv dsp">Product</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 1</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 2</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 3</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 4</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp">Quantity</span><span class="hdv" contenteditable="true">1</span></td><td><span class="hdv dsp">Price</span><span class="hdv" contenteditable="true">$00.00</span></td></tr>'); 
 
}); 
 

 

 
$('.gone').click(function() { 
 
    $('input:checked.chk').each(function(idx, item){ 
 
\t \t var row = $(item).parents(".remove"); 
 
    if (row != null) 
 
    \t row.remove(); 
 
    }); 
 
    });

@media only screen and (max-width: 640px) { 
 
    
 
    /* Force table to not be like tables anymore */ 
 
\t .no-more-tables table, 
 
\t .no-more-tables thead, 
 
\t .no-more-tables tbody, 
 
\t .no-more-tables th, 
 
\t .no-more-tables td, 
 
\t .no-more-tables tr { 
 
\t \t display: block; 
 
\t } 
 
    
 
\t /* Hide table headers (but not display: none;, for accessibility) */ 
 
\t .no-more-tables thead tr { 
 
\t \t position: absolute; 
 
\t \t top: -9999px; 
 
\t \t left: -9999px; 
 
\t } 
 
.hdv { 
 
    width: 46%; 
 
    padding: 5px; 
 
    display: inline-block; 
 
    } 
 
    .dsp { 
 
    font-weight: bold; 
 
    } 
 
\t .no-more-tables tr { border: 1px solid #ccc; } 
 
    
 
\t .no-more-tables td { 
 
\t \t /* Behave like a "row" */ 
 
    width: 100%; 
 
\t \t border: none; 
 
\t \t border-bottom: 1px solid #eee; 
 
\t \t white-space: normal; 
 
\t \t text-align:left; 
 
\t } 
 
    
 

 
\t /* 
 
\t Label the data 
 
\t */ 
 
} 
 
.cf { 
 
    width:100%; 
 
} 
 
.cf > tr > th { 
 
    text-align: left; 
 
} 
 
.cf > tbody > tr > td { 
 
    height: 25px; 
 
} 
 
.newvariation > td > input:focus { 
 
    outline:0px !important; 
 
    -webkit-appearance:none; 
 
    box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
} 
 
.vv > div { 
 
    margin: 5px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 
@media only screen and (min-width: 641px) { 
 
.dsp { 
 
    visibility: hidden; 
 
    display: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="no-more-tables"> 
 
      <table class="table-bordered table-striped table-condensed cf"> 
 
     \t \t <thead class="cf"> 
 
     \t \t \t <tr> 
 
     \t \t \t \t <th class="c1"><input type="checkbox" class="checkAll"/></th> 
 
     \t \t \t \t <th class="c2">Product</th> 
 
     \t \t \t \t <th class="c3" contenteditable="true">Variation 1</th> 
 
     \t \t \t \t <th class="c4" contenteditable="true">Variation 2</th> 
 
     \t \t \t \t <th class="c5" contenteditable="true">Variation 3</th> 
 
     \t \t \t \t <th class="c6" contenteditable="true">Variation 4</th> 
 
     \t \t \t \t <th class="c7">Quantity</th> 
 
     \t \t \t \t <th class="c8">Price</th> 
 
     \t \t \t </tr> 
 
     \t \t </thead> 
 
     \t \t <tbody> 
 
     \t \t \t <tr> 
 
     \t \t \t \t <td><input type="checkbox" class="selectall" /></td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Product</span> 
 
        <span class="hdv" contenteditable="true">iPhone 7 Plus</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 1</span> 
 
        <span class="hdv" contenteditable="true">64GB</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 2</span> 
 
        <span class="hdv" contenteditable="true">Matte Black</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 3</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 4</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Quantity</span> 
 
        <span class="hdv" contenteditable="true">3</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Price</span> 
 
        <span class="hdv" contenteditable="true">$964.36</span> 
 
       </td> 
 
     \t \t \t </tr> 
 
     \t \t \t <tr> 
 
     \t \t \t \t <td><input type="checkbox" class="selectall" /></td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Product</span> 
 
        <span class="hdv" contenteditable="true">iPhone 7 Plus</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 1</span> 
 
        <span class="hdv" contenteditable="true">64GB</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 2</span> 
 
        <span class="hdv" contenteditable="true">Matte Black</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 3</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 4</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Quantity</span> 
 
        <span class="hdv" contenteditable="true">3</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Price</span> 
 
        <span class="hdv" contenteditable="true">$964.36</span> 
 
       </td> 
 
     \t \t \t </tr> 
 
     \t \t \t <tr> 
 
     \t \t \t \t <td><input type="checkbox" class="selectall" /></td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Product</span> 
 
        <span class="hdv" contenteditable="true">iPhone 7 Plus</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 1</span> 
 
        <span class="hdv" contenteditable="true">64GB</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 2</span> 
 
        <span class="hdv" contenteditable="true">Matte Black</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 3</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 4</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Quantity</span> 
 
        <span class="hdv" contenteditable="true">3</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Price</span> 
 
        <span class="hdv" contenteditable="true">$964.36</span> 
 
       </td> 
 
     \t \t \t </tr> 
 
     \t \t \t <tr> 
 
     \t \t \t \t <td><input type="checkbox" class="selectall" /></td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Product</span> 
 
        <span class="hdv" contenteditable="true">iPhone 7 Plus</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 1</span> 
 
        <span class="hdv" contenteditable="true">64GB</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 2</span> 
 
        <span class="hdv" contenteditable="true">Matte Black</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 3</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 4</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Quantity</span> 
 
        <span class="hdv" contenteditable="true">3</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Price</span> 
 
        <span class="hdv" contenteditable="true">$964.36</span> 
 
       </td> 
 
     \t \t \t </tr> 
 
     \t \t \t <tr> 
 
     \t \t \t \t <td><input type="checkbox" class="selectall" /></td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Product</span> 
 
        <span class="hdv" contenteditable="true">iPhone 7 Plus</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 1</span> 
 
        <span class="hdv" contenteditable="true">64GB</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 2</span> 
 
        <span class="hdv" contenteditable="true">Matte Black</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 3</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 4</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Quantity</span> 
 
        <span class="hdv" contenteditable="true">3</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Price</span> 
 
        <span class="hdv" contenteditable="true">$964.36</span> 
 
       </td> 
 
     \t \t \t </tr> 
 
     \t \t \t <tr> 
 
     \t \t \t \t <td><input type="checkbox" class="selectall" /></td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Product</span> 
 
        <span class="hdv" contenteditable="true">iPhone 7 Plus</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 1</span> 
 
        <span class="hdv" contenteditable="true">64GB</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 2</span> 
 
        <span class="hdv" contenteditable="true">Matte Black</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 3</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 4</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Quantity</span> 
 
        <span class="hdv" contenteditable="true">3</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Price</span> 
 
        <span class="hdv" contenteditable="true">$964.36</span> 
 
       </td> 
 
     \t \t \t </tr> 
 
     \t \t \t <tr class="removeAttr"> 
 
     \t \t \t \t <td><input type="checkbox" class="selectall" /></td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Product</span> 
 
        <span class="hdv" contenteditable="true">iPhone 7 Plus</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 1</span> 
 
        <span class="hdv" contenteditable="true">64GB</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 2</span> 
 
        <span class="hdv" contenteditable="true">Matte Black</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 3</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp" contenteditable="true">Variation 4</span> 
 
        <span class="hdv" contenteditable="true">--</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Quantity</span> 
 
        <span class="hdv" contenteditable="true">3</span> 
 
       </td> 
 
       <td> 
 
     \t \t \t \t <span class="hdv dsp">Price</span> 
 
        <span class="hdv" contenteditable="true">$964.36</span> 
 
       </td> 
 
     \t \t \t </tr> 
 

 
     \t \t </tbody> 
 
     \t </table> 
 
     </div> 
 
<div class="vv"> 
 
    <div>+ Add new Line</div> 
 
    <div class="gone">- Remove selected</div> 
 
</div>

Quelle

2016-10-05 00:48:48

Dies entfernt nur den Haken aus der Box. Nicht das eigentliche '' – unlvt

Was meinst du mit 'Ich habe die Schaltfläche an den Code angehängt, aber wenn ich auf den Knopf klicke, werden die markierten Kästchen nicht entfernt. Was mache ich falsch? "Dann? Das willst du also nicht? –

Wenn Sie nach unten scrollen und auf '+ Neue Zeile hinzufügen' klicken, wird ein weiterer '' angehängt. Was ich versuche zu tun, ist eine "" zu entfernen, wenn das Kontrollkästchen aktiviert ist. Wenn ich also mehrere Kästchen ankreuze, werden alle "", die geprüft werden, entfernt. – unlvt

Entfernen geprüft Kontrollkästchen JQuery mit

Antwort

Verwandte Themen