如何分别单击添加或删除按钮动态添加和删除完整

时间：2016-08-04 07:15:43

标签： javascript jquery

我只是想在用户点击添加按钮时添加此表单。每次用户点击添加按钮时，新的表单展开，添加按钮，当用户点击删除按钮时，它将逐个删除所有表单但除外父母一个。                       

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
    </head>
    <body>



    <!-- dashboard-left end here-->




            <div class="inner-aw-div">
                <form name="internship" id="internship">
                    <table class="tbl">
                        <tr>
                            <td>Company / Institute*</td>
                            <td colspan="2"><input type="text" name="title"  id="awtitle"></td>
                        </tr>
                        <tr>
                            <td>Location</td>
                            <td colspan="2" ><input type="text"></td>
                        </tr>
                        <tr>
                            <td>Duration</td>
                            <td class="select-td">

                                <select>  <option value="" disabled selected>1</option>
                                </select> 
                                <select><option value="" disabled selected>week<option>
                                </select>

                            </td>
                            <td class="select-td select-margin">
                                <span> Complete in Year </span>
                                    <select>  <option value="" disabled selected>Year</option>
                                    </select> 

                            </td>

                        <tr>
                            <td>Project Name/ Title</td>
                            <td colspan="2"><input type="text"></td>
                        </tr>
                        <tr>
                            <td>Brief Description</td>
                            <td class="award-description" colspan="2"><textarea id="awdescription"  value="max 2000 characters"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td><label>Key Skill Used</label></td>
                            <td class="award-description" colspan="2"><textarea id="awdescription"  value="max 2000 characters"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td colspan="2" class="intern-img" id="training">Training/ Internship
                            <button id="plus">Add</button>
                            <button id="minus">delete</button>
                            </td>
                        </tr>

                    </table>
                </form>
            </div>
    </body>

    </html>

所以，我不知道如何使用javascript实现这一目标。

2 个答案:

答案 0 :(得分：0)

- 这个。     我的HTML 

<script type="text/javascript" src="../js/jquery.min.js"></script>
<section id="main-content">
  <section class="wrapper">
      <!-- BASIC FORM ELELEMNTS -->
            <div class="row mt">
              <div class="col-lg-12">
                  <div class="form-panel">
                      <h4 class="mb"><i class="fa fa-angle-right"></i>Multi Picture</h4>

                      <form class="form-horizontal style-form" method="post" id="multi_image" enctype="multipart/form-data">
                          <input type="hidden" class="form-control" name="user_id" >


                          <div class="form-group">
                              <label class="col-sm-2 col-sm-2 control-label">Picture 1</label>                              
                              <div class="col-sm-10 upload_div">
                                  <div style="float:left;width:30%;">
                                    <input type="file" name="userfile[]">
                                  </div>
                                  <!--  <div style="width:70%;"> 
                                    <a href="javascript:void(0);" class="btn btn-primary add_class" id="add_id" style="width:20%;margin-right:col-sm-100px;">Add</a>
                                   <a href="javascript:void(0);" class="btn btn-danger delete_class" id="delete_id" style="width:20%;">Delete</a> 
                                  </div> -->
                              </div>
                          </div>

                          <div class="other_files">                                
                          </div>  


                          <div class="form-group">                              
                              <div class="col-sm-10">                                  
                                  <a href="javascript:void(0);" class="btn btn-primary add_btn" id="add_btn" style="width:20%;margin-right:col-sm-100px;">Add</a>
                                  <button class="btn btn-primary" type="submit">Upload</button>
                              </div>
                          </div>

                      </form>
                  </div>
              </div><!-- col-lg-12-->       
            </div><!-- /row --> 
  </section>
</section>

MY JS CODE： 

<script type="text/javascript">


$(document).ready(function(){
    var max_upload=5;
    var addbutton=$('.add_btn');
    var wrapper=$('.other_files');

    var x=1;

    $(addbutton).click(function(){
        if(x < max_upload)
        {          
          x++;
          var new_html='<div class="form-group">';
          new_html+='<label class="col-sm-2 col-sm-2 control-label">Picture ' + x + '</label>';                              
          new_html+='<div class="col-sm-10 upload_div">';
          new_html+='<div style="float:left;width:30%;">';
          new_html+='<input type="file" name="userfile[]">';
          new_html+='</div>';
          new_html+='<div style="width:70%;">'; 
          new_html+='<a href="javascript:void(0);" class="btn btn-danger delete_class" id="delete_id" style="width:20%;">Delete</a>'; 
          new_html+='</div>';
          new_html+='</div>';
          new_html+='</div>';

          wrapper.append(new_html); 
        }
    });

    $(wrapper).on('click','.delete_class',function(e){
        e.preventDefault();
        $(this).parent().parent().parent().remove();
        x--;
    });

  });
</script>

答案 1 :(得分：0)

首先从原始delete中移除form，以便您可以保留对父form的删除。您可以在cloned forms上动态添加，如下所示：

var id=0;
$(document).ready(function() {
  //attach a click event to add button whose id begins with plus, since id's have
  //to be unique in DOM, we will be generating new id as in plus1, plus2 etc.,
  //when we clone the form and before we append it. So the below selector means
  //attach click events to those buttons whose id begins with plus. ^= means begins with
  $(document).on('click',"button[id^=plus]",function(e){
      e.preventDefault(); //prevent default action
      //create a delete button html
      var deleteBtn=$('<button id="minus">delete</button>');
      //clone the parent form which will be in first
      var clonedForm=$('form:first').clone();
      //you can also do var clonedForm=$("#internship").clone();
      id++; //increment the global id
      
      //loop through each element which contains id property and replace with a new one 
     //to maintain uniqueness
      clonedForm.find('[id]').each(function(){
        var $el=$(this); //get the reference to element 
        $el.attr('id',$el.attr('id')+id); //replace its id with new one 
      });
      deleteBtn.attr('id',deleteBtn.attr('id')+id);//replace delete button's id
      clonedForm.attr('id',clonedForm.attr('id')+id); //replace cloned form's id
      //append deleteBtn to td where add exists
      clonedForm.find("td[id^=training]").append(deleteBtn);
     
      //append cloned form to inner-aw-div
      clonedForm.appendTo(".inner-aw-div");
  });
  //delete event to delete the closest form
  $(document).on('click',"[id^=minus]",function(){
    $(this).closest('form').remove();  //just remove the parent form
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>

<!-- dashboard-left end here-->




<div class="inner-aw-div">
  <form name="internship" id="internship">
    <table class="tbl">
      <tr>
        <td>Company / Institute*</td>
        <td colspan="2">
          <input type="text" name="title" id="awtitle">
        </td>
      </tr>
      <tr>
        <td>Location</td>
        <td colspan="2">
          <input type="text">
        </td>
      </tr>
      <tr>
        <td>Duration</td>
        <td class="select-td">

          <select>
            <option value="" disabled selected>1</option>
          </select>
          <select>
            <option value="" disabled selected>week
              <option>
          </select>

        </td>
        <td class="select-td select-margin">
          <span> Complete in Year </span>
          <select>
            <option value="" disabled selected>Year</option>
          </select>

        </td>

        <tr>
          <td>Project Name/ Title</td>
          <td colspan="2">
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>Brief Description</td>
          <td class="award-description" colspan="2">
            <textarea id="awdescription" value="max 2000 characters"></textarea>
          </td>
        </tr>
        <tr>
          <td>
            <label>Key Skill Used</label>
          </td>
          <td class="award-description" colspan="2">
            <textarea id="awdescription" value="max 2000 characters"></textarea>
          </td>
        </tr>
        <tr>
          <td></td>
          <td colspan="2" class="intern-img" id="training">Training/ Internship
            <button id="plus">Add</button>
      
          </td>
        </tr>

    </table>
  </form>
</div>

相关问题
最新问题