Hello!

There is a form: http://jsbin.com/obihat/1/edit Two fields should be added to it by clicking on ADD, in the upper part of the form and in the lower one. At the same time, next to each field in the upper part of the form there should be a delete button, on clicking on which the corresponding field in the lower part of the form will be deleted.

I would be grateful, for any impulse, a hint towards the right decision.

UPDATED : I specify the question: How do I click on the DELETE button at the top of the form to delete the corresponding field at the bottom. Those. Initially, by clicking on ADD we made appendChild in both forms, now how do you know for which field of the second form do you need to removeChild along with removing this.parentNode of the top form?

ps: At this stage, when creating fields, I put them unique data-id, and then after them I delete them. But this one is still a bicycle, it seems to me that there is something simpler and it lies on the surface. Thank you.

  • learn dom. insertBefore() , appendChild() and removeChild() will help you. htmlweb.ru/java/example/dom_child2.php - Gedweb
  • Thank you. My fault, it was necessary to concretize the question. I generally know how to remove or add an item, I added a clarification of the issue in the update post. - dimiork

1 answer 1

Now I see that a person understands what he is talking about.

One option is to hang the numbers to the id' of the DOM elements.

 var i=0; function add(){ // ... delete_button.num=i; block_with_inputs.id='inputArea'+i; i++; }

by clicking on the button:

 function del(){ // ... block_with_inputs=document.getElementById('inputArea'+this.num); block_with_inputs.parentNode.removeChild(block_with_inputs) }

here I assume that you have input' merged in a block. But not that you do not interfere with doing the same for each individual element, wherever they are