Jquery - click button to add a new record or delete

2018-04-23

Today, we need to adjust the work, family, and education pages to add a new record or delete it by clicking the button.

This function requires JS, and I chose JQuery for convenience. Implemented using hide() and show() methods. (There should be many methods, I will add them later, and now I am a js novice, I can only think of hiding and displaying)

My code implementation is as follows:

jquery

// work first add
  $("#workAdd1").click( function(){
    if($("#work2").is(':hidden')){
      $("#work2").show();
      $(".but-add-1").hide();
      $('.but-del-1').show();
      $("#workAdd1").addClass('btn-danger');
      //$(".but-add").text("delete");
    }else{
      $("#work2").hide();
      $(".but-add-1").show();
      $('.but-del-1').hide();
      $("#workAdd1").removeClass('btn-danger');

      //$(".but-add").text("delete");  
    }
  });

  // work second add
  $("#workAdd2").click( function(){
     if($("#work3").is(':hidden')){
      $("#work3").show();
      $(".but-add-2").hide();
      $('.but-del-2').show();
      $("#workAdd2").addClass('btn-danger');
      //$(".but-add").text("delete");
    }else{
      $("#work3").hide();
       $(".but-add-2").show();
      $('.but-del-2').hide();
       $("#workAdd2").removeClass('btn-danger');
      //$(".but-add").text("delete");  
    }
  });

HTML

<button id="workAdd1" type="button" class="btn btn-default btn-sm btn-success">
            <div class="but-add-1"> <span class="glyphicon glyphicon-plus"></span> 添加</div>
            <div class="but-del-1" style="display: none;"> <span class="glyphicon glyphicon-minus"> </span> 删除</div>
     </button>

     
    <div id="work2" style="margin-top:50px; display: none;">
        <p>Second job:</p>
       <input type="text" >

        <button id="workAdd2" type="button" class="btn btn-default btn-sm btn-success">
            <div class="but-add-2"> <span class="glyphicon glyphicon-plus"></span> 添加</div>
            <div class="but-del-2" style="display: none;"> <span class="glyphicon glyphicon-minus"> </span> 删除</div>
         </button>
     
 
  
      <div id="work3" style="margin-top:50px;  display: none;">
        <p>Third job:</p>
        <input type="text">
          <p>Fill up to three jobs</p>
     </div>

    </div>