Question

我正在尝试删除属性record_type标签的父级。这是HTML：

<div id="append">
    <div class="col-md-6 form-group hide_fields" style="display: block;">
        <label class="col-sm-3 control-label" for="record_type">Record Type</label>
    </div>
    <div class="col-md-6 form-group hide_fields" style="display: block;">
        <label class="col-sm-3 control-label" for="field_value[0]">Field Value</label>
        <div class="col-sm-9">
            <input name="field_value[]" type="text" id="field_value3" class="form-control" required="required" value="">
        </div>
    </div>
    <div class="col-md-6 form-group hide_fields" style="display: block;">
        <label class="col-sm-3 control-label" for="field_value[1]">Field Value</label>
        <div class="col-sm-9">
            <input name="field_value[]" type="text" id="field_value4" class="form-control" required="required" value="">
        </div>
    </div>
    <div class="col-md-6 form-group hide_fields" style="display: block;">
        <label class="col-sm-3 control-label" for="field_value[2]">Field Value</label>
        <div class="col-sm-9">
            <input name="field_value[]" type="text" id="field_value5" class="form-control" required="required" value="">
        </div>
    </div>
</div>

这是我的jQuery代码：

var j = 0;
$("#add_more").on("click", function () {
    var $clone = $('.hide_fields').clone();
    //$clone.find("h2").remove();
    $clone.find("label[for='record_type']").parent().remove();
    $clone.find("select[name='record_type']").parent().remove();
    $clone.find("input[name='field_value[0]']").val('').attr("name", "field_value[]").attr("required", true).attr('id', "field_value" + (j + 3));
    j++;
    $clone.find("input[name='field_value[1]']").val('').attr("name", "field_value[]").attr('id', "field_value" + (j + 3));
    j++;
    $clone.find("input[name='field_value[2]']").val('').attr("name", "field_value[]").attr('id', "field_value" + (j + 3));

    //$clone.append("<span class='glyphicon glyphicon-remove' style='cursor:pointer;'></span>");
    $clone.appendTo('#append');
    j++;
});

它不会删除标签属性record_type的父级。

Answer 1

试试这个：

$("label[for='record_type']").parent().remove();

fiddle

Answer 2

尝试使用一些DOM操作替代（排除不应克隆的元素），

var j = 0;
$("#add_more").on("click", function() {
  var $clone = $('.clone-elem:first').clone();
  //$clone.find("h2").remove();
  $clone.find("input[name='field_value[0]']").val('').attr("name", "field_value[]").attr("required", true).attr('id', "field_value" + (j + 3));
  j++;
  $clone.find("input[name='field_value[1]']").val('').attr("name", "field_value[]").attr('id', "field_value" + (j + 3));
  j++;
  $clone.find("input[name='field_value[2]']").val('').attr("name", "field_value[]").attr('id', "field_value" + (j + 3));

  //$clone.append("<span class='glyphicon glyphicon-remove' style='cursor:pointer;'></span>");
  $clone.appendTo('#append');
  j++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="append">
  <div class="col-md-6 form-group hide_fields" style="display: block;">
    <label class="col-sm-3 control-label" for="record_type">Record Type</label>
  </div>
  <div class="clone-elem">
    <div class="col-md-6 form-group hide_fields" style="display: block;">
      <label class="col-sm-3 control-label" for="field_value[0]">Field Value</label>
      <div class="col-sm-9">
        <input name="field_value[]" type="text" id="field_value3" class="form-control" required="required" value="">
      </div>
    </div>
    <div class="col-md-6 form-group hide_fields" style="display: block;">
      <label class="col-sm-3 control-label" for="field_value[1]">Field Value</label>
      <div class="col-sm-9">
        <input name="field_value[]" type="text" id="field_value4" class="form-control" required="required" value="">
      </div>
    </div>
    <div class="col-md-6 form-group hide_fields" style="display: block;">
      <label class="col-sm-3 control-label" for="field_value[2]">Field Value</label>
      <div class="col-sm-9">
        <input name="field_value[]" type="text" id="field_value5" class="form-control" required="required" value="">
      </div>
    </div>
  </div>
</div>
<br/>
<button id="add_more">Add More</button>

另外，我认为每个元素都不需要ID。

Answer 3

您可能想尝试一下。

insert on duplicate key update

jquery删除子元素的父div

3 个答案: