Question

我有一个表单，我希望能够添加和删除文本框和标签。每个文本框前面都有一个标签，因此标签是兄弟。我正在尝试选择文本框的兄弟，所以我删除文本框时也删除它。 我的问题是如何选择以前的标签。删除文本框很简单，它是最后一个带有名称的文本框，我作为参数传递给函数（因为我重新使用它）。删除文本框工作正常，它只是前面的标签，这是一个挑战。这是我的功能。

function remove(someName) {

 var count = $('input[name=' + someName + ']').length;

 if (count > 1) {
     $('input[name=' + someName + ']:last').remove();
     $(this).closest('label.numbers').remove();
     /*
     I have tried this one below but it doesn't work
     $('label.numbers > input[name=' + someName + ']:last').parent().remove();

     This too doesn't work.
     $('label.numbers > input[name=' + someName + ']:last').offsetParent().remove();

     */
 }

更新这是我的Razor代码片段，用于清晰的图片

            <div class="form-group">
            @Html.LabelFor(model => model.SupportingDocumentation, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div>
                    <label class="numbers"> 1 </label>
                    @Html.TextBoxFor(model => model.SupportingDocumentation, new { @class = "SupportingDocumentation" })

                    <input type="button" value="+" class="roundButton" onclick="add('SupportingDocumentation', 'SupportingDocumentation')" />
                    <input type="button" value="-" class="roundButton" onclick="removeElement('SupportingDocumentation')" />
                </div>

                <div> 
                    <label class="numbers"> 2 </label>
                    @Html.TextBoxFor(model => model.SupportingDocumentation, new { @class = "SupportingDocumentation" }) 
                </div>
                <div> 
                    <label class="numbers"> 3 </label>
                    @Html.TextBoxFor(model => model.SupportingDocumentation, new { @class = "SupportingDocumentation" }) 
                </div>

                @Html.ValidationMessageFor(model => model.SupportingDocumentation, "", new { @class = "text-danger" })
            </div>
        </div>

Answer 1

在您的代码中，当您尝试使用其引用来选择标签时，文本框已被删除，而不是 -

a）你可以像这样一个一个地删除它们 -

var txtbox = $('input[name=' + someName + ']:last');
var lbl = txtbox.parent().find('label.numbers');

txtbox.remove();
lbl.remove();

b）或者只是删除父div，它将删除其中的所有内容 -

var div = $('input[name=' + someName + ']:last').parent();
div.remove();

c）或者将div中的html设为空 -

var div = $('input[name=' + someName + ']:last').parent();
div.html('');

修改：

使用解决方案（a） -
为您的案例提供一个示例小提琴
http://jsfiddle.net/15morm22/3/

Answer 2

正如山姆指出的那样，我宁愿试图去除一个兄弟而不是父母。以下是适用于我的jquery代码，这完全归功于Sam的努力。

$("#removeBtn").on("click", function(){

    var textbox = $('input[name=' + 'ThisElement' + ']:last').parent();
    var label = textbox.prev();

    textbox.remove();
    label.remove();

    return false;
});

here 是jsfiddle代码段的链接

JQUERY检索并删除以前的兄弟姐妹

2 个答案: