Question

HTML

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


  <img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />


  <div id="plusicondivbox"class="insidediv " style="margin-top:-53px;" >

  <img class="mynasicondiv" src="vectorimages/mynas.svg" />

JS

$(function () {
    $('.plusicon').on('click', function () {

        var textBox = '<input type="text" class="textbox"/>';
        var a = $(this).attr("id")

        $('#'+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
            })

    });
});

我有两个按钮，plusicon按钮和mynesicon按钮。我想点击plusicon按钮添加文本框和图片，同时点击mynessicon按钮应删除文本框和图片。我的问题是，点击mynesicon相应的文本框只会删除。

Answer 1

使用.each删除所有元素，并删除目标元素上的.remove功能。

＆＃13;

$(function () {
   var a;
    $('.plusicon').on('click', function () {
        
        var textBox = '<input type="text" class="textbox"/>';
        a = $(this).attr("id")
        console.log(a);
        $('#'+a+"box").append(textBox);
        
        
        var img = '<img class="mynasicondiv" src="vectorimages/mynas.svg"></img>';

        $('#' + a + "box").append(img);
       
  
    });
      $('.mynasicondiv').on("click", function () {
            $('#' + a + "box").each(function(index, v){
              $(v).remove();
            });
        });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

<div><img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" /></div>
         


              
<div><img class="mynasicondiv" src="vectorimages/mynas.svg" /> </div>

<div id="plusicondivbox"class="insidediv " ></div>
</div>

＆＃13;

如何在按钮单击中逐个删除文本框

1 个答案: