データID付きのAJAX添付コンテナを削除するには

Question

私は後で再挿入できるように、ユーザー選択の隠しフィールドを追加しています。また、通常のdivを追加して、ユーザーに選択を表示します。

私はボタンが表示されている行と隠れている行を削除する削除機能を作成しようとしています。

現在、私は正しい可視行を削除できますが、正しい隠しdivは削除されません。

私はdata-idを取得しようとしましたが、対応するものではなく、行の最後のものを常に削除します。

#visibleAgeRangeに対応する#hiddenChildAgeRangesから正しいdivを削除するにはどうすればよいですか？あなたもdeleteAge要素のID属性ですnanny_age_range_idプロパティを使用して隠し要素を作成していると

//nanny childcare ranges 
     $.each(data.nanny_age_range, function(index, data) { 

       var str = '<a href="#" id="' + data.nanny_age_range_id + '" aria-label="Close" class="deleteAge"><i class="fa fa-times" aria-hidden="true"></i></a>'; 

       var hiddenAgeTo = '<input id="userProfileAgeTo' + childAgeCount + '" value="'+data.age_maximum+'" name="userProfileAgeTo[]" style="visibility:hidden; position:absolute;" type="text" />'; 

       var hiddenAgeFrom = '<input id="userProfileAgeFrom' + childAgeCount + '" value="'+data.age_minimum+'" name="userProfileAgeFrom[]" style="visibility:hidden; position:absolute;" type="text" />'; 

       var childAgeAppend = 
        ' <div class="col-md-12" id="childAgeRange'+childAgeCount+'">'+ 
        '  <div class="col-md-3">'+ 
        '  <b>From'+data.age_minimum+' to '+data.age_maximum+'</b>'+ 
        '  </div>'+ 
        '  <div class="col-md-3">'+ 
        '  '+str+''+ 
        '  </div>'+ 
        '</div>'; 
       $("#hiddenChildAgeRanges").append('<div name="nanny_age_range_id[]" value="'+data.nanny_age_range_id+'" id="userAgeRangeSelection'+ childAgeCount+'" data-id="userAgeRangeSelection'+data.nanny_age_range_id+'">'+ hiddenAgeFrom + hiddenAgeTo+''); 
       $("#visibleAgeRange").append(childAgeAppend); 
       childAgeCount++; 

     }); 

//delete nanny age range 
$(document).on("click", ".deleteAge", function(e) { 
    e.preventDefault(); 
    var age_id = $(this).attr('id'); 

    $(this).closest('.col-md-12').fadeOut(300, function() { 
     $(this).remove(); 
    }); 
    $.ajax({ 
     type: "POST", 
     url: 'PHP/deleteData.php', 
     data: "age_id=" + age_id, 
     success: function(data) { 
      if (data.status == 'success') { 
       childAgeCount--; 
      } else if (data.status == 'error') { 
      } 
     }, 
     error: function(jqXHR, textStatus, errorThrown, data) { 
      console.log(jqXHR, textStatus, errorThrown, data); 
     } 
    }); 
}); 

Answer 1

。セレクタを作成して操作します。

Attribute Equals Selector [name=”value”]とremove()を使用できます。

//delete nanny age range 
$(document).on("click", ".deleteAge", function(e) { 
    e.preventDefault(); 
    var age_id = $(this).attr('id'); 

    $('[data-id="userAgeRangeSelection' + age_id +'"]').remove(); 
    //Rest of the code 
});