Javascript 在文本框中添加按钮

我有一个表单，它允许人们根据需要添加多少地址，它由两个按钮控制，一个是“添加地址”，另一个是“删除”。我想知道是否有人可以帮我删除“删除”按钮，并在文本框的右角放置一个“x”，作为删除该框的按钮。我已将与以下表格相关的代码放在下面。在此之前再次感谢你的帮助，我感谢你的帮助

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>

$（窗口）。加载（函数（）{
$（“#添加地址”）。单击（功能（e）{
e、 预防默认值（）；
var numberOfAddresses=$（“#form1”）.find（“输入[name^='data[address]']）。长度；
var标签=“”；
var输入=“”；
var removeButton='Remove'；
var html=“”+标签+输入+移除按钮+”；
$（“#form1”）.find（#add address”）.before（html）；
});
$（文档）。在“单击”、“删除地址”功能（e）上{
e、 预防默认值（）；
$（this.parents（“.address”）.remove（）；
//更新标签
$（“#form1”）.find（“label[for ^='data[address]']”）。每个（函数（）{
//$（this.html（“地址”+（$（this.parents）（'.Address'）.index（）+1））；
$（this）.next（“input”）.attr（“占位符”，“地址”+（$（this）.parents（'.Address'）.index（）+1））；
});
});
});

html

添加地址

只需使用绝对位置“x”

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

---

注意，我将.closeBtn放在textarea元素之后，因此不需要在css中指定z索引。默认情况下，后一个元素将位于前一个元素之上。

您只需使用css、

display:inline block

，以及负的

左边距

HTML

.address input[type=text]

样式将使输入的文本不会显示在关闭的

x

---

您发布完整的html吗？我没有看到您的删除按钮。添加地址后，我将看到删除按钮。

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

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

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

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