Question

我有这种形式，允许人们根据他们需要的数量添加地址，它由两个按钮控制，一个是＆＃34;添加地址＆＃34;另一个是＆＃34;删除＆＃34;。我想知道是否有人可以帮我删除＆＃34;删除＆＃34;按钮，而是放置一个＆＃34; x＆＃34;在文本框的右上角，用作删除该框的按钮。我已经放置了与下面表格相关的代码。再次感谢您的帮助，感谢您的帮助。

jquery的

<script>
$(window).load(function(){
$("#add-address").click(function(e){
        e.preventDefault();
        var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
        var label = '<label for="data[address][' + numberOfAddresses + ']"></label> ';
        var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" placeholder= "Address ' + (numberOfAddresses+1) + '"/>';
        var removeButton = '<button class="remove-address">Remove</button>';
        var html = "<div class='address'>" + label + input + removeButton + "</div>";
        $("#form1").find("#add-address").before(html);
    });

$(document).on("click", ".remove-address",function(e){
    e.preventDefault();
    $(this).parents(".address").remove();
    //update labels
    $("#form1").find("label[for^='data[address]']").each(function(){
        //$(this).html("Address " + ($(this).parents('.address').index() + 1));
        $(this).next("input").attr("placeholder","Address " + ($(this).parents('.address').index() + 1));

    });
});

});
</script>

HTML

<form id="form1" method="post" action = "h.php">
    <div class="address">
        <!--<label for="data[address][0]">Address 1</label>-->
        <input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
    </div>
    <button id="add-address">Add address</button>

    <input type="submit" value="Submit" />
</form>

Answer 1

您只需使用css，display:inline-block和否定margin-left

就可以做到这一点

HTML

<div class="address">
    <!--<label for="data[address][0]">Address 1</label>-->
    <input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
    <div class="inputRemove">&times;</div>
</div>

CSS

.inputRemove{
    display:inline-block;
    margin-left:-20px;
    cursor:pointer;
}

.address input[type=text] {
    padding-right:25px;
}

.address input[type=text]样式会使得文本输入不会显示在关闭x

下

<强> JSFiddle Demo

Answer 2

只需使用绝对位置'x'

.container        " position relative     
    textarea      " psotion absolute
    .closeBtn     " position absolute

注意我把.closeBtn放在textarea元素之后，所以你不需要在css中指定z-index。默认情况下，后面的元素将位于上一个元素之上。

在文本框中添加按钮

2 个答案: