Javascript 使用唯一id动态追加html，并使用Jquery删除正确的html

我现在可以附加HTML并删除正确附加的HTML，但是当我添加更多的HTML时，它会附加相同的id，因此如果我想显示或隐藏某个div元素，该功能将无法工作

这是我附加和删除的代码：

$(".adRowOutdoor").click(function(){
var newTxt = $('<div class="add-row-outdoor row width-100 padding-left-15"> <div class="form-group col-md-4"> <label for="state" class="control-label">Type</label> <div class="sg-select-container"> <select id="choose-outdoor"> <option disabled="">Choose type</option> <option value="Undercover walkway">Undercover walkway</option> <option value="Oval">Oval</option> <option value="Swimming Pool">Swimming Pool</option> <option value="Outdoor Basketing Court">Outdoor Basketing Court</option> <option value="other">Other</option> </select> </div> </div><!-- end col --> <div id="choose-outdoor-is-hidden" class="form-group col-md-4" style="display: none;"> <label for="other-textfield" class="control-label">Other</label> <input type="text" class="form-control form-input-field" name="other-textfield" value="" required="" placeholder=""> <span class="help-block"></span> </div> <div class="col-md-2 remove-btn-audit form-space-top-35"> <button class="btn btn-add-waste removeOutdoor"><i class="fa fa-minus-circle o-btn-add" aria-hidden="true"></i>Remove</button> </div> </div><!-- row audit -->');
    $(".row-outdoor-container").append(newTxt);

});
$("body").on('click' , '.removeOutdoor' , function(){
      var curRow = $(this).parents('div.add-row-outdoor');
      curRow.remove();
});

---

我的代码的中间部分是

将

id

更改为

类

，因此基本上使

选择户外

和

选择户外是隐藏的

，因为您的类位于相同的元素上

然后在动态创建元素时使用事件委派：

$('.row-outdoor-container').on("change", '.choose-outdoor', function (e) {

    var val = $(this).val();
    $el = $(this).closest(".add-row-outdoor").find('.choose-outdoor-is-hidden');

    if (val == 'other') {
        $el.show();
    } 
    else {
        $el.hide();
    }

});

---

更新

这比我在回答中提到的使用ID要好，但他/她可能必须保持原样。“最好永远不要依赖身份证。”IliaRostovtsev yea同意。。。但OP想要实现的任何目标都可以使用ids实现。

$('.row-outdoor-container').on("change", '.choose-outdoor', function (e) {

    var val = $(this).val();
    $el = $(this).closest(".add-row-outdoor").find('.choose-outdoor-is-hidden');

    if (val == 'other') {
        $el.show();
    } 
    else {
        $el.hide();
    }

});