Pergunta sobre javascript – Removendo Elementos Dinâmicos e Reordenando esses Elementos Valores e IDs

0

Eu tenho uma função que cria um elemento DOM onClick. Esse elemento contém entradas comnomes de matriz.

No começo eujá tem um elemento (o mesmo como aqueles que eu crio onClick).

<tbody id="elementsBody">

<tr id="element1"> // 1 becomes 2 and so on when new element is added
  <td>
    <input type="hidden" name="numbers[]" value="1" /> // 1 becomes 2 and so on when new element is added
  </td>
  <td>
    <input type="text" name="titles[]" />
  </td>
</tr>

// Newly created Elements goes in here!!!

</tbody>

Esta é a minha função que cria mais elementos como o acima.

E tambémcria um botão Excluir DIV para este elemento recém-criado.

function addElement() {
  var elementsBody = document.getElementById('elementsBody');

  var numbers = document.forms[1].elements['numbers[]'];
  var number = numbers.length+1;

  if (isNaN(number)) {
    var number = 2;
  }

  var numberInput = '<td><input type="hidden" name="numbers[]" value="'+ number + '" /></td>';
  var titleTd = '<td><input type="text" name="titles[]" /></td>';

  // This is the Delete Button DIV
  // I want to create a function (deleteElement) which Removes This Element
  var deleteButton = '<td><div onClick="deleteElement('+ number + ')">Delete Element</div></td>';

  elementsBody.insertAdjacentHTML('beforeend', '<tr id="element' + number + '">' + numberInput + titleTd + deleteButton + '</tr>');
}

Eu quero criar uma função (deleteElement) que remove este elemento adicionado onClick.

Depois de remover um elemento, quero que essa funçãoreordenar todos os valores dos elementos e ID's. Por exemplo, se eu remover o elemento número 2, o valor e o ID do terceiro elemento devem se tornar 2.

Não JQuery.

Por favor me ajude com isso!

@FelixKling, algo assim! E também para renumerar todos os elementos restantes. Hypn0tizeR
insertAdjacentHTML é ótimo :) Hypn0tizeR
Eu acho que não jQuery, @Felix ;-) Arjan
O que você tentou? Com o que exatamente você precisa de ajuda? Obtendo uma referência para os elementos? Remover os elementos depois de ter uma referência? Algo mais? (Eu não sabia sobreinsertAdjacentHTML, masrealmente existe). Felix Kling

Sua resposta

2   a resposta
1

xcluir do alvo até o final. Excluir o alvo da matriz Renumerar na matriz Em seguida, adicione o que sobrou. Se fosse eu eu estaria olhando para ter um outro ElementID (DisplayElmentID?), Então você não teria que fazer tudo isso. ou seja, deixar o atributo de ID usado pelo DOM o heck sozinho

@Esailija, ele já me ajudou com código! Graças a ele! Hypn0tizeR
A questão é como? : / Hypn0tizeR
0

violino):

function addElement() {
  var elementsBody = document.getElementById('elementsBody');

  var numberInput = '<td><input type="hidden" name="numbers[]" value="" /></td>';
  var titleTd = '<td><input type="text" name="titles[]" /></td>';
  var deleteButton = '<td><div onClick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); update();">Delete Element</div></td>';

  elementsBody.insertAdjacentHTML('beforeend', '<tr>' + numberInput + titleTd + deleteButton + '</tr>');
  update();


}

function update() {
  var inputs = document.getElementById('elementsBody').querySelectorAll("input[type='text']");
  [].forEach.call(inputs, function(input, index) {

    input.value = index + 1;
  });
}
<table>
  <tbody id="elementsBody">

    <tr>
      <td>
        <input type="hidden" name="numbers[]" value="1" />
      </td>
      <td>
        <input type="text" name="titles[]" />
      </td>
    </tr>



  </tbody>
</table><button onclick="addElement();">add</button>

Perguntas relacionadas