12

Tenho montado a seguinte estrutura em HTML:

<form name="criaModelo" method='post' action=''>
  <label for="name">
    <strong>Nome:</strong>
    <input name="nomeModelo" type="text">
  </label>

  <h2>Associando Instruções</h2>

  <img src="images/4.png" class="btnNewInst btnHover" title="Inserir nova instrução" />

  <label for="criaAssoc" class="instAssoc">
    <strong>ID:</strong>
    <input type="text">
    <strong>Ordem:</strong>
    <input type="text">

    <span>
      <strong class="instTxt">Instrução:</strong>
      <textarea disabled="disabled"></textarea>
    </span>
  </label>

  <h2>Associando Tempo</h2>

  <img src="images/4.png" class="btnNewTime btnHover" title="Inserir nova instrução" />

  <label class="time">
    <strong>ID:</strong>
    <input type="text" style="width:25px;">
    <div>
      <strong>Total:</strong>
      <span>12:12:12</span>
      <strong class="margem">Tipo:</strong>
      <span>visível</span>
      <strong class="margem">Momento:</strong>
      <span>12:12:12</span>
      <strong class="margem">Ordem:</strong>
      <span>Crescente</span>
    </div>
  </label>

  <input type="submit" name="btnCriaModelo" class="newbtn" value="Criar"> 
</form>

Que tem o seguinte resultado: Captura de Tela

Eu queria ao clicar nesse botão ele ir adicionando ao form depois do ultimo elemento corrente esse HTML para criar uma nova label como acima.

<label for="criaAssoc" class="instAssoc">
  <strong>ID:</strong>
  <input type="text">
  <strong>Ordem:</strong>
  <input type="text">

  <span>
    <strong class="instTxt">Instrução:</strong>
    <textarea disabled="disabled"></textarea>
  </span>
</label>
1

2 Respostas 2

11

Eu sugiro você manter esse label como template (i.e. deixe ele no seu estado inicial, vazio e invisível), e clonar outros a partir dele:

<label id="meuTemplate" for="criaAssoc" class="instAssoc" style="display:none">
    ...
</label>
var clone = $("#meuTemplate").clone();
clone.prop("id", novoId); // É necessário mudar o id depois que se clona

Então você pode selecionar o último label e inserir depois dele:

$(".instAssoc:last").after(clone);
clone.show();

Exemplo no jsFiddle.

Atualização: para fazer acesso a um determinado elemento dentro desse item que você acabou de criar, veja a função .find (ela busca em todos os descendentes). E se quiser que um elemento exclua a si próprio, use a função .remove (ou .detach, se você pretende reinserir esse elemento no DOM posteriormente; ex.: arrastar-e-soltar / drag-and-drop). Exemplo:

clone.find(".botaoExcluir").click(function() {
    clone.remove();
});

Exemplo atualizado.

2
  • E se eu tivesse um botão dentro de cada label para excluí-la?
    – Luitame
    Commented 29/01/2014 às 5:41
  • @Luitame A solução mais simples é adicionar o handler para tratar do clique no mesmo momento em que você clona. Atualizei a resposta com um exemplo.
    – mgibsonbr
    Commented 29/01/2014 às 5:54
5

Vamos lá, sei que a pergunta é de como seria usando jQuery, porém prefiro responder como deve ser feito da melhor forma, já que o que pretende fazer será replicado várias vezes no seu projeto(outras telas com comportamentos similares ou até mesmo mais complexos) e uma biblioteca de MVVM cai como uma luva. Como exemplo, cito a minha preferida knockoutjs.

Bibliotecas de MVVM abstraem tarefa do programador em ter que sincronizar a interface do usuário com os dados e knockoutjs faz isso de uma forma muito semântica, basicamente é possível criar comportamentos extremamente complexos sem que haja nenhum acoplamento entre os dados que você deseja trabalhar a view.

Como exemplo, fiz este pequeno plunk. Clique nas aba "Code" e depois em script.js e depois no index.html e veja como é simples trabalhar com ela.

-----update

Como foi sugerido, segue abaixo todo o código utilizado na solução, que como podem ver, é bem simples e fácil de ser compreendido.

Javascript

var 
    minhaView = {

        //lista de registros
        registros: ko.observableArray([]),
        id: ko.observable(""),
        ordem: ko.observable(""),

        incluirNovo: function(el) {

          //incluo na lista
          this.registros.push({id: this.id(),ordem: this.ordem()});

          //limpo textboxes
          this.id(""), this.ordem("");
        }
      }

ko.applyBindings(minhaView);

HTML

<label for="txtId">ID</label>
<input type="text" id="txtId" data-bind="value: id" />
<label for="txtOrdem">Ordem:</label>
<input type="text" id="txtOrdem" data-bind="value: ordem"/>
<button data-bind="click: incluirNovo">+</button>
<h2>Relação de itens</h2>
<ul data-bind="foreach: registros(), visible: registros().length > 0">
    <li>ID: <span data-bind="text: id"></span> - Ordem:<span data-bind="text: ordem"></span>
    </li>
</ul>
<span data-bind="visible: registros().length===0">Ainda não existem itens registrados.</span>
2
  • 1
    Também uso o knockout.js, até pensei logo nele quando vi a pergunta, mas preferi responder usando a tecnologia solicitada. Entretanto, sua sugestão é bastante útil, só sugiro que inclua um código de exemplo (não precisa copiar o plunk todo, só o trecho relevante), pois da forma como está agora a utilidade da resposta está atrelada ao link.
    – mgibsonbr
    Commented 29/01/2014 às 6:27
  • @mgibsonbr, embora não ache que seja necessário, vou atualizar como proposto.
    – Cleiton
    Commented 29/01/2014 às 6:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .