Home>

javascript - i want to add or remove elements

Click the add button and delete button respectively
I want elements and text boxes to be added and removed

// Element to move
 Element A 
// Add button
<input type = "button" value = "add">
// Delete button
<input type = "button" value = "Delete">
<form method = "post" action = "">
  <p>
    <input type = "text" placeholder = "name of icon" name = "icon">
  </p>
  <p>
  Element A
    <input type = "text" value = "Please click ☆" name = "zahyou">
  </p>
// Send
  <p>
  <input type = "submit" value = "next" name = "send">
  </p>
javascript html
  • Answer # 1

    First of all,

    
 Element A

    In contrast,

    What kind of UI do you want to process multiple times

    How to reflect in form and how to process in form

    Please pack etc.

  • Answer # 2

      

    Add button I want to be able to add and delete "elements I want to move" and "text box" (element A in this case) by pressing the delete button.
      I can move only one of them with my knowledge now, so I want to add or delete multiple

    The essential problem is the same as the previous question, so please reread all the answers to the previous question.
    https://StackOverflow.com/questions/225839

    Problem "If you want to specify an additional position corresponding to an additional button, you can't implement it with my skill unless you prepare as many event handlers as there are buttons."

    The solution is to prepare a map or specify a relative position, as in the previous answer.
    https://developer.mozilla.org/en/docs/Web/API/Node

    Preparecorresponding mapof add button and location

    Add torelative position(parent/child, brother/brother) corresponding to the add button

    Re: minomonnta-san

  • Answer # 3

    Element inherits node (node ​​derived object), so you can use the properties and methods of the parent node.

    If you also check the node implementation, there are the following methods:

    Node.appendChild ()

    Node.removeChild ()

    Node.replaceChild ()

    There are also the following implementations:

    ParentNode.append ()

    ParentNode.prepend ()

    ChildNode.remove ()

    When reading the MDN, the parent object implementation should check the parent object's page, while the target object's page explains what the parent (derived from) object is.

    Search for "object inheritance" to see why a

    element can use a node implementation.

Related articles