Un modo semplice per cancellare il valore di qualsiasi input all'interno di un div?

Question

C'è un modo semplice per iterare sugli elementi figli di un elemento, ad esempio un div, e se sono qualsiasi tipo di input (radio, select, text, hidden ...) cancella il loro valore?

Modificare per aggiungere il collegamento a example solution code. Mille grazie a Guffa e agli altri intervistati! Ho imparato da questo!

Answer 1

Suppongo che si desidera cancellare tutto i bambini, non solo i bambini diretti, quindi dovrebbe essere ricorsivo. Dato che diversi elementi di input vengono cancellati in modo diverso, devi controllare il loro tipo in modo da sapere cosa fare con essi. Suppongo che si desidera cancellare textarea anche, ma i pulsanti lasciare invariato:

function clearChildren(element) { 
    for (var i = 0; i < element.childNodes.length; i++) { 
     var e = element.childNodes[i]; 
     if (e.tagName) switch (e.tagName.toLowerCase()) { 
     case 'input': 
      switch (e.type) { 
       case "radio": 
       case "checkbox": e.checked = false; break; 
       case "button": 
       case "submit": 
       case "image": break; 
       default: e.value = ''; break; 
      } 
      break; 
     case 'select': e.selectedIndex = 0; break; 
     case 'textarea': e.innerHTML = ''; break; 
     default: clearChildren(e); 
     } 
    } 
} 

chiamata con un riferimento all'elemento:

clearChildren(document.getElementById('IdOfTheDiv')); 

Edit:
dimenticato il select ...

Modifica 2:
Alcune correzioni: childNodes.length, gestione di elementi senza tagName e lettere maiuscoleNome valori.

Answer 2

La risposta di Karim funziona bene. Utilizzando jQuery, credo che andrò qualcosa di simile:

$("#myDiv").each(function(){ 
    if($(this).type == "input") 
     $(this).val(''); 
}); 

In realtà, venite a pensarci bene, si può anche provare:

$("#myDiv input").val('');//myDiv is your Div name 

Answer 3

Oh ragazzi, questo sarebbe un uno di linea con jQuery:

$(':input:not(:button)', div).val([]) 

Senza jQuery hai avuto modo di spiegare <select> campi, campi di testo, campi di password e campi radio/checkbox:

function clearFields(container) { 
    var selects = container.getElementsByTagName('select'); 

    for(var i=0, len=selects.length; i < len; i++) { 
     selects[i].selectedIndex = -1; 
    } 

    var fields = container.getElementsByTagName('input'); 
    for(var i=0, len=fields.length; i < len; i++) { 
     var field = fields[i]; 
     switch(field.type) 
     { 
      case 'radio': 
      case 'checkbox': 
       field.checked = false; 
       break; 

      case 'text': 
      case 'password': 
      case 'hidden': 
       field.value = '' 
     } 
    } 

    var fields = container.getElementsByTagName('textarea'); 
    for(var i=0, len=fields.length; i < len; i++) { 
     fields[i].value = '' 
    } 
} 

Answer 4

Molto semplice con jQuery:

$('#myDiv').children().find('input,select').each(function(){ 
    $(this).val(''); 
}); 

possiamo mettere il maggior numero di tag nel "trovare" chiamare.

Answer 5

Complimenti, Haresh! Piccola aggiunta per deselezionare le caselle di controllo. (Utilizzare vero per controllare tutto.)

$('#myDiv').children().find('input,select').each(function(){ 

$(this).val(''); 
$(this).attr('checked',false); 

}); 

Answer 6

$('#div_id input[type=textbox], #div_id select, #div_id textarea').val(''); 
$('#div_id input[type=radio], #div_id input[type=checkbox]').prop('checked', false); 

per jQuery.

Answer 7

Utilizzare il seguente codice per eliminare ogni tipo di ingresso elementi forma di valore

function clear_form_elements(id_name) { 
    jQuery("#"+id_name).find(':input').each(function() { 
    switch(this.type) { 
     case 'password': 
     case 'text': 
     case 'textarea': 
     case 'file': 
     case 'select-one':  
      jQuery(this).val(''); 
      break; 
     case 'checkbox': 
     case 'radio': 
      this.checked = false; 
    } 
    }); 
}