JQUERY 检索并删除以前的同级

Question

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

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

在您的代码中，当您尝试使用它对 select 标签的引用时，文本框已被删除，而不是 -

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) 为您的案例 fiddle 的示例 -

http://jsfiddle.net/15morm22/3/

Answer 2

正如 Sam 指出的那样，我更想删除一个兄弟姐妹而不是 parent。这是对我有用的 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 片段

的 link

JQUERY 检索并删除以前的同级

JQUERY Retrieve and Remove Previous Sibling

javascript

asp.net-mvc

jquery

razor

asp.net-mvc-5