追加ボタンまたは削除ボタンのそれぞれをクリックして動的に追加および削除する方法

このフォームを追加するには、ボタンをクリックします。すべてのユーザーが追加ボタンをクリックすると、新しいフォームが追加されます。ユーザーが削除ボタンをクリックすると、すべてのフォームが1つずつ削除されますが、親のものを除きます。追加ボタンまたは削除ボタンのそれぞれをクリックして動的に追加および削除する方法

<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を達成する方法を知りません。

出典

2016-08-04 Anju Budhwan

使用テンプレートエンジンを使用すると、追加]ボタンをクリックしたときにhoganjs新しいフォームを作成したいです。 – James

@evitaまず自分で試してみませんか？ http://www.w3schools.com/js/js_htmldom.asp –

試してみてください。 MY 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>

出典

2016-08-04 07:26:18

まずあなたが親formの削除を保つことができるようにあなたの元formからdeleteを削除します。あなたは以下のよう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>

出典

2016-08-04 07:37:34

ありがとうございました！これはおそらくこれを行う最も簡単な方法です –

あなたは大歓迎です..もしそれが役に立ったら答えを受け入れてください.. :) Happy coding .. :) –

追加ボタンまたは削除ボタンのそれぞれをクリックして動的に追加および削除する方法

答えて

関連する問題