2010-01-18 32 views
6

Puedo ocultar el 'tr' cuando se hace clic en 'Eliminar'. con el siguiente códigoCuadro de texto vacío con Jquery

$("a#minus").bind("click", function(e){ 
    $(this).closest('tr').hide(); 
}); 

Pero también desea borrar el contenido de los cuadros de texto 2 (ID de la caja de texto de son dinámicos [frm_Expense_expensesVO_ __strAmount y frm_Expense_expensesVO_ __memo] aquí '*' va de 1 a infinito). Por favor ayuda. Gracias

<table> 
<tr> 
    <td> 
     Amount 
    </td> 
    <td> 
     Memo 
    </td> 
    <td>  
     &nbsp; 
    </td> 
</tr> 
<tr> 
    <td> 
     <input type="text" name="expensesVO[0].strAmount" value="2.30" id="frm_Expense_expensesVO_0__strAmount"/> 
    </td> 
    <td> 
     <input type="text" name="expensesVO[0].memo" value="Five" id="frm_Expense_expensesVO_0__memo"/> 
    </td> 
    <td> 
     <a id="minus" href="#">Remove</a> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input type="text" name="expensesVO[1].strAmount" value="3.45" id="frm_Expense_expensesVO_1__strAmount"/> 
    </td> 
    <td> 
     <input type="text" name="expensesVO[1].memo" value="Six" id="frm_Expense_expensesVO_1__memo"/> 
    </td> 
    <td> 
     <a id="minus" href="#">Remove</a> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input type="text" name="expensesVO[2].strAmount" value="" id="frm_Expense_expensesVO_2__strAmount"/> 
    </td> 
    <td> 
     <input type="text" name="expensesVO[2].memo" value="" id="frm_Expense_expensesVO_2__memo"/> 
    </td> 
    <td> 
     <input type="submit" id="frm_Expense_ExpenseAdd_plus" name="action:ExpenseAdd_plus" value="+"/> 
    </td> 
</tr> 
<tr> 
    <td>  
     <label id="frm_Expense_transactionVO_amount">5.75</label> 
    </td> 
    <td align="right"> 
     <input type="submit" id="frm_Expense_Cancel" name="action:ExpenseAdd_cancel" value="Cancel"/> 
    </td> 
    <td align="left"> 
     <input type="submit" id="frm_Expense_Save" name="action:ExpenseAdd_save" value="Save"/> 
    </td> 
</tr> 

Respuesta

16
$("a#minus").bind("click", function(e){ 
    $(this).closest('tr').hide().find('input:text').val(''); 
}); 

Nota: Véase tambiéndarmen's answer sobre por qué el selector a#minus no funcionará como se desea.

+0

Casi idéntico, pero me venció 24 segundos, entonces concedo y eliminaré mi respuesta. :) – Alconja

+0

¿por qué no simplemente '$ ('a # menos'). Clic (función() {....'? ¿Existe una ventaja al usar 'bind()'? – carillonator

+1

el clic es solo un método de ayuda, por lo tanto idéntico a la llamada de enlace, pero no me molestaría demasiado en guardar algunos caracteres. No hay mucho que ganar allí. – Anurag

0

Use el atributo class, y seleccione las dos cajas de texto usando esa className. Luego puede establecer el valor de esa colección en la cadena nula.

7

Debe especificar una clase para anclas. La vinculación en una sola identificación generará un evento para la última.

Ejemplo:

$("a.remove").live('click', function(){ 
    $(this).closest('tr').hide().find("input").val(""); 
}); 
+0

Muchas gracias muchachos :) –

+0

+1. No me di cuenta de eso. Añadiré una nota en mi publicación. –

0

está el más cercano se define en jQuery núcleo o un plugin?

De todos modos, podría obtener todos los cuadros de texto dentro de ese tr y luego hacer una coincidencia de expresiones regulares. Esto solo debería vaciar los cuadros de texto que coinciden con los identificadores mencionados en su pregunta.

$("a#minus").bind("click", function(e){ 
    var row = $(this).closest('tr'); 
    $("input:text", row).each(function(item) { 
     var id = item.id; 
     if(/frm_Expense_expensesVO_[0-9]+__strAmount/.test(id)) { 
      $(item).val(''); 
     } 
     else if(/frm_Expense_expensesVO_[0-9]+__memo/.test(id)) { 
      $(item).val(''); 
     } 
    }); 
    row.hide(); 
}); 
+0

'closest()' está en jQuery core 1.3 en adelante - http://docs.jquery.com/Traversing/closest –

Cuestiones relacionadas