Question

＆＃13;

 <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>

＆＃13;

我有两个图标一个是plusbutton花药是我的按钮我想添加图像和文本框onclick plusbutton图标，当我点击mynas按钮删除唯一相应的文本框和图像。

＆＃13;

$(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");
            })

＆＃13;

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

＆＃13;

但我的问题是单击mynas按钮删除所有文本框。

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>

Working Fiddle

Answer 2

所有这些消失的原因是因为empty plusicondivbox包含了所有这些内容... 这是我解决您问题的方法：fiddle

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进行复杂的搜索。

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

2 个答案: