Pytanie w sprawie javascript – Usuwanie elementów dynamicznych i zmiana kolejności tych elementów Wartości i identyfikatory

0

Mam funkcję, która tworzy element DOM onClick. Ten element zawiera dane wejściowenazwy tablic.

Na początku jajuż je mam element (taki sam jak te, które tworzę 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>

To jest moja funkcja, która tworzy więcej elementów takich jak powyżej.

I równieżtworzy przycisk Usuń DIV dla tego nowo utworzonego elementu.

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>');
}

Chcę utworzyć funkcję (deleteElement), która usuwa ten dodany element na kliknięcie.

Po usunięciu elementu chcę, aby ta funkcja byłazmień kolejność wszystkich wartości elementów i identyfikatorów. Na przykład, jeśli usunę element nr 2, wartość i identyfikator trzeciego elementu muszą stać się 2.

Nie JQuery.

Proszę mi pomóc z tym!

Co próbowałeś? W czym dokładnie potrzebujesz pomocy? Odniesienie do elementów? Usuń elementy, gdy masz już odniesienie? Coś innego? (Nie wiedziałem o tyminsertAdjacentHTML, alenaprawdę istnieje). Felix Kling
@ FelixKling, Coś w tym stylu! A także do zmiany numeracji wszystkich pozostałych elementów. Hypn0tizeR
insertAdjacentHTML jest świetny :) Hypn0tizeR
Chyba nie jQuery, @Felix ;-) Arjan

Twoja odpowiedź

2   odpowiedź
1

suń Od celu do końca. Usuń cel z tablicy Zmień numer w tablicy Następnie dodaj to, co zostało z tyłu. Jeśli to ja chciałbym mieć inny ElementID (DisplayElmentID?), Nie musiałbyś robić tego wszystkiego. tzn. pozostawić identyfikator ID używany przez DOM w pojedynkę

@Esailija, już mi pomógł z kodem! Dzięki niemu! Hypn0tizeR
Pytanie brzmi: Jak? : / Hypn0tizeR
0

skrzypce):

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>

Powiązane pytania