jQuery如何删除元素

Question

我需要动态将city（ 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();
        }
    });

这是完整的代码：

 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(); } 

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