Remove() 函数在 JavaScript 中不起作用

Question

在这里，我尝试在我的 html 中动态添加和删除文本框。文本框添加成功，但我的删除功能不起作用

请告诉我为什么这个功能不起作用

  var counter = 2;
    $(document).ready(function () {

    $("#addButton").click(function () {
        if (counter > 5) {
            alert("Limit Exceeds");
            return false;
        }
        var $wrap = $('#TextBoxesGroup');
        var dynamichtml = '<div class="mcity"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/>  </div><div class="mcity"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 1 + '" class="auto"/> </div><div class="mcity"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 11 + '" class="auto"/> </div>';
        $wrap.append(dynamichtml);
        counter++;
    });

    $("#removeButton").click(function () {
        if (counter == 1) {
            alert("No more textbox to remove");
            return false;
        }

        counter--;
        $("#TextBoxesGroup").find("#divleft_" + counter).remove();
        $("#TextBoxesGroup").find("#divright_" + counter).remove();


    });

Answer 1

我想你想实现这个

var counter = 1;


$("#addButton").click(function () {
    if (counter > 5) {
        alert("Limit Exceeds");
        return false;
    }
    var $wrap = $('#TextBoxesGroup');
    var dynamichtml = '<div class="box"><div class="mcity"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/>  </div><div class="mcity"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 1 + '" class="auto"/> </div><div class="mcity"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 11 + '" class="auto"/> </div></div>';
    $wrap.append(dynamichtml);
    counter++;
});

$("#removeButton").click(function () {
    if (counter == 1) {
        alert("No more textbox to remove");
        return false;
    }

    counter--;
    console.log(counter)
    $("#TextBoxesGroup div.box:last-child").remove();



});

请查看fiddle

Answer 2

从上面的问题我理解并开发了这个，检查一次

[http://jsfiddle.net/UDq9W/][1]

好的@Azad chouhan

Answer 3

这是我的 JSFiddle 链接

var counter = 1;
$(document).ready(function () {

$("#addButton").click(function () {
    if (counter > 5) {
        alert("Limit Exceeds");
        return false;
    }
    var $wrap = $('#TextBoxesGroup');
    var dynamichtml = "<div id='divleft_"+(counter)+"' ><div class='mcity' ><label> Leaving from</label><input type='text' name='textbox" + counter + "' id='textbox" + counter + "' class='auto'/>  </div><div class='mcity'> <label> Going to</label>  <input type='text' name='textbox" + counter + "' id='textbox"+ counter + 1 + "' class='auto'/> </div><div class='mcity'> <label> Going to</label>  <input type='text' name='textbox" + counter + "' id='textbox" + counter + 11 + "' class='auto'/> </div></div>";
    $wrap.append(dynamichtml);
    counter++;
});

$("#removeButton").click(function () {
    if (counter == 1) {
        alert("No more textbox to remove");
        return false;
    }
    counter--;
    $("#TextBoxesGroup").find("#divleft_" + counter).remove();
});
});

Answer 4

您正在搜索似乎不存在的 ID。

$("#TextBoxesGroup").find("#divleft_" + counter).remove();
$("#TextBoxesGroup").find("#divright_" + counter).remove();

我认为您可能只是想将您的动态html 包装在一个 <div> 标记中，如下所示：

<div id='divleft_"+counter+"' >