So löschen Sie ein Kontrollkästchen mit javascript

Arbeite ich auf dieser HTML-Seite, auf der ich eine check-box, zusammen mit der Beschriftung, indem Sie auf die Schaltfläche hinzufügen, gibt es trotzdem, dass ich einen löschen-button, so dass, wenn ich wählen Sie eine check-box, und drücken Sie die Schaltfläche löschen Sie die check-box neben dem Textfeld gelöscht wird??Bitte meinen code unten!!

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Add()
{
var checkbox=document.createElement('input');
var inps=document.createElement('input');
var output=document.getElementById('output');
checkbox.type='checkbox';
inps.type='text';
inps.name='textboxname';
checkbox.name='checkname';
output.appendChild(checkbox);
output.appendChild(inps);
output.appendChild(document.createElement('br'));
}
</script>
</head>
<body>
<form action="http://localhost:9990" method="post">
<span id="output"></span>
<input type="button" value="Add" onclick="Add()">
<center>
<p>
<input type="file" name="datafile" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</center>
</form>
</body>
</html>
  • können wir beobachten, versuchen Sie code, um Ihnen zu helfen ? oder bieten jsfiddle ?
  • Veröffentlichen Sie code,besser eine Geige
  • mögliche Duplikate von element Entfernen aus DOM
  • mein Versuch-code von oben
  • aktualisierte Antwort auf Ihre Anforderung. überprüfen Sie bitte
InformationsquelleAutor Santosh459 | 2013-10-29
  1. 1

    Geben Sie alle Kontrollkästchen, die möglicherweise gelöscht werden, die der gleichen Klasse. Zusätzlich Kennzeichnen Sie alle Textfelder, die gelöscht werden konnten, die mit Ihrer eigenen Klasse. Meine Kontrollkästchen gekennzeichnet werden, die mit chk und meine Textfelder werden beschriftet mit txt. In:

    <input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />

    Folgende Lösung sollte funktionieren, solange die check-Boxen und Textfelder sind 1 zu 1.

    die Funktion, die Sie hinzufügen, um Ihre Schaltfläche "löschen" wird eine Schleife durch alle check-Boxen und sehen Sie, wenn Sie gelöscht werden, und löschen Sie dann die geprüften lieben.

    Hier ist das JS:

    function delBoxes(){
    var boxes = document.getElementsByClassName('chk');
    var texts = document.getElementsByClassName('txt');
    for(var i = 0; i<boxes.length; i++){
        box = boxes[i];
        txt = texts[i];
        if(box.checked){
            box.parentNode.removeChild(box);
            txt.parentNode.removeChild(txt);
        }
    }
}

    Wird, löschen Sie alle überprüft Kontrollkästchen, alles, was Sie jetzt tun müssen, ist einen Knopf und hinzufügen, dass die Funktion als onclick. 

    <input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
    InformationsquelleAutor Nick Chapman
  2. 1

    Beispiel-HTML

    <div>
    <input type='checkbox' value='asd' id='test' name='test' />
    <input type='checkbox' value='asd' id='tester' name='test' />
    <input type='button' value='remove' id='rmvBtn' />
</div>

    In reinem javascript, können Sie dies tun,

    var rmvBtn = document.getElementById('rmvBtn');

rmvBtn.addEventListener('click', function(){
   var rmvCheckBoxes = document.getElementsByName('test');

    for(var i = 0; i < rmvCheckBoxes.length; i++)
    {
        if(rmvCheckBoxes[i].checked)
        {
            removeElm(rmvCheckBoxes[i]);    
        }
    }  
});

function removeElm(elm){
   elm.parentElement.removeChild(elm);
}

    JS Fiddle

    InformationsquelleAutor ta-run
  3. 0

    HTML

    <input type="checkbox" id="checkboxid" name="checkboxname">
 <button id="btnDeleteid" onclick="deleteCheckBox()" name="btnDeletename">Delete</button>

    JavaScript

    function deleteCheckBox(){
  if (document.getElementById('checkboxid').checked){
        var answer = confirm('Are you sure you want to delete this checkbox?');
         if (answer)
           {
           $("#checkboxid").remove();
           }
         }else{
           alert("Pls check the checkbox.");
          }
}

    Ich hoffe das hilft.

    Finden fiddle - http://jsfiddle.net/F8w8B/3/

    • Hi hariharan,es gibt eine Bestimmung für das hinzufügen mehrerer Checkboxen in diesem code kann ich löschen Sie alle von Ihnen, indem Sie auf Sie und klicken auf die löschen-Taste??
    • ja, wenn Sie in der Lage sind, die beziehen sich auf die Komponente, dann können Sie in der Lage, es zu löschen alle. platzieren Sie einen übergeordneten div-Element und fügen Sie alle Kontrollkästchen innerhalb dieses div-wenn Sie möchten, löschen Sie alle. rufen Sie das übergeordnete div-Element und entfernen Sie es.
    InformationsquelleAutor Hariharan
Schreibe einen Kommentar