javascript - jquery仅当前一个div的文本框值不为空时才在按钮上添加新的div

Question

我想在最多10个“div”之后添加一个新的div，每个div有三个文本框。每次我只想在前一个 div 的第三个文本框值不为空时添加新的 div !!!

这是我的代码:

<div class="input_fields_wrap">
    <button class="add_field_button">Add Booking</button>
</div>
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var counter = 2;
    $(".add_field_button").click(function() {
        if (counter > 10) {
            alert("Only 10 textboxes allow");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<div id="target"><label>Textbox #' + counter + ' : </label>' +
            '<input type="text" name="textbox' + counter +
            '" id="firsttextbox' + counter + '" value="" >&nbsp;&nbsp;<input type="text" name="textbox' + counter +
            '" id="secondtextbox' + counter + '" value="" >  <a href="#" id="remove_field">Remove</a><input type="text" id="box' + counter + '" value="">this is 3rd textbox of each div</div>');
        newTextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;

    });
    $(this).on("click", "#remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent('#target').remove();
        counter--;

    });
});
</script>

如何做到这一点？

Answer 1

如果您只想要上一组的最后一个 div 的值，请选中此

var boxid="#box" + (counter-1);
var prev_value=$(boxid).val();
if (counter > 10) {
            alert("Only 10 textboxes allow");
            return false;
        }
        else if(prev_value == ""){
            alert("please fill the box");
            return false;
        } 

<强> LIVE DEMO