如何在单击按钮上删除文本boxdiv

Question

  <img id="plusicondiv" class="rose" src="images/pluseicon.svg" /> <div id="plusicondivbox"class="insidediv " style="margin-top:-53px;" > <img class="mynasicondiv" src="images/mynas.svg" /> </div> 

我有两个图标，一个是plusbutton花药是mynasbutton，我想添加图像和文本框onclick plusbutton图标，当我单击mynasbutton时，仅删除相应的文本框和图像。

 $(function () { $('.rose').on('click', function () { var textBox = '<input type="text" class="textbox"/>'; var a = $(this).attr("id");alert(a) $('#'+a+"box").append(textBox); var img = '<img class="mynasicondiv" src="vectorimages/mynas.svg"></img>'; $('#' + a + "box").append(img); $(function() { $(document).on("click",".mynasicondiv",function () { $(this).parent('#' + a + "box").empty(); return $(this).find(".rose").input(); $(this).addClass("texbox"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

但是我的问题是单击mynasbutton删除了所有文本框。

Answer 1

试试这个代码

<script type="text/javascript" src="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>
                          </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>
<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>

工作小提琴

Answer 2

它们全部消失的原因是因为您empty了包含所有plusicondivbox ...这是我解决问题的方法： 提琴

HTML：

<div id="plusicondiv" class="rose" src="images/pluseicon.svg" >+</div>
<div id="plusicondivbox"class="insidediv " style="margin-top:0px;" ></div>  

jQuery的：

$(document).ready(function () {
    $('.rose').on('click', function () {
        var textBox = '<div>'+
                      '<input type="text" class="textbox"/>'+
                      '<div class="mynasicondiv" src="vectorimages/mynas.svg">-</div>'+
                      '</div>';
        var a = $(this).attr("id");alert(a);        
        $('#'+a+"box").append(textBox);
    });

    $(document).on("click",".mynasicondiv",function () {
        var a = $(this).attr("id");alert(a);
        $(this).parent().remove();
    });
});

您可以再次将<div>更改为<img> ，这不会影响jQuery，因为它与类而不是元素一起出现。 您还可以同时插入文本框和删除图像（.mynasicondiv），并通过用div包装它们来简化删除任务，将div作为触发点击和删除的元素的父对象更容易只需删除包含特定文本框和mynasicondiv的元素即可。您应该将jquery包装在$(document).ready(function(){ *** }); ，因此您在加载DOM并准备就绪时执行了该操作，这也为您提供了一个起点...我建议您找到一种为文本框提供唯一id以便您可以在不对DOM进行复杂搜索的情况下对其进行寻址。