如何在单击按钮时一一删除文本框

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函数。

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

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