Question

我需要动态地将城市（input）添加到citiesList，当按下cancel按钮时，如果输入的值为空，我应该删除输入。

但是，当我按下edit按钮时，会再次显示新添加的项目！

function view(str) {
  $("[id=second" + str.toString() + "]").hide();
  $("[id=first" + str.toString() + "]").show();
  $("[id=editable" + str.toString() + "]").hide();
  $('#second' + str.toString() + 'input:empty').closest('div').removeData();
}
function addCity(element) {
    var input = document.createElement("input");
    input.className = "form-control";
    input.id = "secondCity";
    input.name = "added";
    document.getElementById("citiesList").appendChild(input);
    edit("City");
}
function edit(str) {
    $("[id=second" + str.toString() + "]").show();
    $("[id=first" + str.toString() + "]").hide();
    $("[id=editable" + str.toString() + "]").show();

}

.panel {
  border: 0; }

.panel-container {
  padding-top: 20px; }

.panel-heading .fa-toggle-up, .panel-heading .fa-toggle-down {
  font-size: 17px; }

.panel-primary > .panel-heading {
  background-color: #30a5ff;
  color: #fff;
  border: none; }



.panel-primary .panel-settings:hover, .panel-primary .panel-toggle:hover, .panel-success .panel-settings:hover, .panel-success .panel-toggle:hover, .panel-info .panel-settings:hover, .panel-info .panel-toggle:hover, .panel-warning .panel-settings:hover, .panel-warning .panel-toggle:hover, .panel-danger .panel-settings:hover, .panel-danger .panel-toggle:hover {
  border: none;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.4); }



.panel-heading {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.025em;
  height: 60px;
  line-height: 38px; }

.panel-default .panel-heading {
  background: #fff;
  border-bottom: 1px solid #e9ecf2;
  color: #444444; }

.panel-footer {
  background: #fff;
  border-top: 1px solid #e9ecf2; }

 
.panel .border-top, .panel .border-right, .panel .border-bottom, .panel .border-left {
  border-color: #e9ecf2; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-default">
  <div class="panel-heading">
    Cities

                <a onclick="edit('City')">
                  <em class="fa fa-edit"></em> Edit
                </a>


                <a onclick="addCity(this)">
                  <em class="fa fa-plus"></em> Add
                </a>
  </div>
  <div class="panel-body">

    <form role="form" method="post" id="citiesList" name="smgt">
    </form>
    <br>
    <div class="pull-right action-buttons">
      <input id="editableCity" type="submit" style="font-family: 'FontAwesome';" value="&#xf0c7; Save" class="btn btn-md btn-success" />
      <a onclick="view('City')" id="editableCity" class="btn btn-md btn-danger"><em
                            class="fa fa-close"></em>
                        Cancel</a>
    </div>
  </div>
</div>

Answer 1

如果为空，则应测试每个输入值，然后执行某些操作，首先需要查找类等于form-control的所有输入，然后循环：

$('.form-control').each(function() {
        if ($(this).val().length == 0) {
            $(this).remove();
        }
    });

以下是完整代码：

＆＃13;

function view(str) {
  $("[id=second" + str.toString() + "]").hide();
  $("[id=first" + str.toString() + "]").show();
  $("[id=editable" + str.toString() + "]").hide();
  
//Test each input if is EMPTY
        $('.form-control').each(function() {
            if ($(this).val().length == 0) {
                $(this).remove();
            }
        });
}

function addCity(element) {
  var input = document.createElement("input");
  input.className = "form-control";
  input.id = "secondCity";
  input.name = "added";
  document.getElementById("citiesList").appendChild(input);
  edit("City");
}

function edit(str) {
  $("[id=second" + str.toString() + "]").show();
  $("[id=first" + str.toString() + "]").hide();
  $("[id=editable" + str.toString() + "]").show();

}

＆＃13;

.panel {
  border: 0;
}

.panel-container {
  padding-top: 20px;
}

.panel-heading .fa-toggle-up,
.panel-heading .fa-toggle-down {
  font-size: 17px;
}

.panel-primary>.panel-heading {
  background-color: #30a5ff;
  color: #fff;
  border: none;
}

.panel-primary .panel-settings:hover,
.panel-primary .panel-toggle:hover,
.panel-success .panel-settings:hover,
.panel-success .panel-toggle:hover,
.panel-info .panel-settings:hover,
.panel-info .panel-toggle:hover,
.panel-warning .panel-settings:hover,
.panel-warning .panel-toggle:hover,
.panel-danger .panel-settings:hover,
.panel-danger .panel-toggle:hover {
  border: none;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.4);
}

.panel-heading {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.025em;
  height: 60px;
  line-height: 38px;
}

.panel-default .panel-heading {
  background: #fff;
  border-bottom: 1px solid #e9ecf2;
  color: #444444;
}

.panel-footer {
  background: #fff;
  border-top: 1px solid #e9ecf2;
}

.panel .border-top,
.panel .border-right,
.panel .border-bottom,
.panel .border-left {
  border-color: #e9ecf2;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-default">
  <div class="panel-heading">
    Cities

    <a onclick="edit('City')">
      <em class="fa fa-edit"></em> Edit
    </a>


    <a onclick="addCity(this)">
      <em class="fa fa-plus"></em> Add
    </a>
  </div>
  <div class="panel-body">

    <form role="form" method="post" id="citiesList" name="smgt">
    </form>
    <br>
    <div class="pull-right action-buttons">
      <input id="editableCity" type="submit" style="font-family: 'FontAwesome';" value="&#xf0c7; Save" class="btn btn-md btn-success" />
      <a onclick="view('City')" id="editableCity" class="btn btn-md btn-danger"><em
                            class="fa fa-close"></em>
                        Cancel</a>
    </div>
  </div>
</div>

＆＃13;

jQuery如何删除元素

1 个答案: