CODEWITHSUNDEEP
javascript
Hypn0tizeR
Hypn0tizeR

Reputation: 794

Removing Dynamic Elements and Reordering those Elements Values and ID's

I have a function which creates a DOM element onClick. That Element contains inputs with array names.

At the start I already have one element (the same like those which I create 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>

This is my function which creates more elements like the one above.

And also creates a Delete Button DIV for this newly created element.

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

I want to create a function (deleteElement) which Removes this Added Element onClick.

After Removing an Element, I want that function to reorder all the elements values and ID's. For example if I remove the Element number 2, the value and ID of the third Element must become 2.

Not JQuery.

Please Help me with that!

Upvotes: 0

Views: 2257

Answers (2)

Hypn0tizeR
Hypn0tizeR

Reputation: 794

Thanks @Esailija for help! Solution (fiddle):

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>

Upvotes: 0

Tony Hopkinson
Tony Hopkinson

Reputation: 20320

You are going to have build an array of all elements involved. Delete From the target to the end. Delete the target from the array Renumber in the array Then add what's left back. If it was me I'd be looking at having an other ElementID (DisplayElmentID ?) then you wouldn't have to do all this stuff. ie leave the ID attibute used by the DOM the heck alone

Upvotes: 1

Related Questions