2015-09-12 2 views
0

Это мой МодельУдалить элемент из списка динамический HTML

public List<ModelNomeTel> NomeTels { get; set; } 

public class ModelNomeTel 
{ 
    public string Nome { get; set; } 
    public string Telefone { get; set; } 
}public class ModelNomeTel 
{ 
    public string Nome { get; set; } 
    public string Telefone { get; set; } 
} 

HTML вход и показать список

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="form form-horizontal"> 
      <div class="form-group"> 
       <label>Nome:</label> 
       <input type="text" id="textNome" class="form-control" /> 
      </div> 
      <div class="form-group"> 
       <label>Telefone:</label> 
       <input type="text" id="textTel" class="form-control" /> 
      </div> 
      <div class="form-group"> 
       <label>&nbsp;</label> 
       <button id="buttonAdicionar" type="button" 
        class="btn btn-primary"> 
        Adicionar</button> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="form-horizontal"> 
      <table id="tablePost" class="table table-bordered table-striped"> 
       <thead> 
        <tr> 
         <th>Nome</th> 
         <th>Telefone</th> 
        </tr> 
       </thead> 
       <tbody></tbody> 
      </table> 
      <div class="form-group"> 
       <label>&nbsp;</label> 
       <button id="buttonPost" type="submit" 
        class="btn btn-primary"> 
        Postar</button> 
      </div> 
     </div> 
    </div> 

И JavaScript добавить.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#buttonAdicionar").on("click", function() { 
      var nome = $("#textNome").val(); 
      var tel = $("#textTel").val(); 
      $("#tablePost > tbody").append("<tr data-nome='" + nome + "' data-tel='" + tel + "'><td>" + nome + "</td><td>" + tel + "</td></tr>"); 
      $("#textNome").val(''); 
      $("#textTel").val(''); 
      $("#textNome").focus(); 
     }); 

     $("#buttonPost").on("click", function() { 
      var listName = "NomeTels"; 
      var qtd = 0; 
      $("#tablePost > tbody > tr").each(function() { 
       var nome = $(this).data("nome"); 
       var tel = $(this).data("tel"); 
       $("#formPost").prepend("<input type='hidden' name='" + listName + "[" + qtd + "].Nome' value='" + nome + "'>"); 
       $("#formPost").prepend("<input type='hidden' name='" + listName + "[" + qtd + "].Telefone' value='" + tel + "'>"); 
       qtd += 1; 
      }); 
     }); 
    }); 
</script> 

Могу ли я добавить параметр для удаления строк? Возможно? Поскольку, насколько я понимаю, если вы удаляете элемент из индекса, следующие элементы из списка не публикуются.

ответ

0

Используйте это:

$('#button').on('click',function(e){ 
    $('tr:last').remove(); 
}); 

Это приведет к удалению последней строки, присутствующие в HTML-документе, когда щелкнули. Здесь #button - это идентификатор вашей кнопки, который удалит строки.

+0

У вас есть опечатка: '$ ('tr: last')', а не '$ (tr: last)' – ankhzet

+0

@ankhzet Спасибо !!! Отредактировано сейчас. – Arjun

+0

Это не удаляет элемент, он больше не отображается, но когда я отправляю таблицу, все еще есть пункты – DanielGatti

Смежные вопросы