удалить динамически сгенерированный div с помощью JQUERY в SharePoint 2013

Question

Я строю систему вложений с выпадающим флажком, при проверке добавляю ссылку на вложение в виде плитки.Теперь у меня возникла проблема, потому что с кодом, который я использую для удаления кликаемой плитки, я не могу смотреть вокруг, но ни одно решение не работает.я смотрю в консоли, но никаких ошибок не появляется, потому что браузер не может обработать событие, которое я получил этот код в данный момент:

//Dropdown checkboxes function
//show options
$("#custom-select").on("click", function(){
    $("#custom-select-option-box").toggle();
});
//mark option as selected
function toggleFillColor(obj) {
    $("#custom-select-option-box").show();
    if ($(obj).prop('checked') == true) {
        $(obj).parent().css("background", "#c6e7ed");
    }else {
        $(obj).parent().css("background", "#FFF");
    }
}
// check and uncheck the option by clicking
$("#custom-select-option-box").on("click",".custom-select-option", function(){
    var checkBoxObj = $(this).children("input");
    if ($(checkBoxObj).prop('checked') == true){
        $(checkBoxObj).prop("checked", false);        
     }else {
        $(checkBoxObj).prop("checked", true);
     }
     toggleFillColor(checkBoxObj);
     checkbox();
});
//hide the option box clicking out of the box 
$("body").on("click", function(e){
    if (e.target.id != "custom-select" && e.target.className != "custom-select-option"){
        $("#custom-select-option-box").hide();
    }
});
//function to prinnte the checked options
function checkbox(){
 //get the checkbox element
  var checkboxes = document.getElementById("custom-select-option-box");
  var checkboxesChecked = [];
  var titles = [];
  // loop over them all
  for (var i=0; i < $(checkboxes).children("div").length; i++) {
     // stick the checked ones onto an array...
     if ($(".custom-select-option:nth-child("+(i+1)+")").children("input").prop("checked") == true) {
        checkboxesChecked.push($(".custom-select-option:nth-child("+(i+1)+")").children("input").val());
         titles.push($(".custom-select-option:nth-child("+(i+1)+")").text());
     }
  }
    
    if(checkboxesChecked.length > 0){
        $("#listaAllegati").html("<tr><th>Allegati:</th></tr>");
    }
  for (var i = 0; i < checkboxesChecked.length; i++){
      var link = "<a href='"+checkboxesChecked[i]+"'>"+titles[i]+"</a>";
      $("#listaAllegati").append("<div id='tile'>"+link+"<button type='button' id='closeTile'> X </button> </div>");
  }
}
//remove the current tile clicking in the in the close button "X"
$("#listaAllegati #tile").on("click","#closeTile", function(){
   $(this)parent().remove(); 
});

#checkbox-dropdown-container {
    background: transparent;
    padding: 20px;
    margin-bottom: 12px;
}
.option-container{
    background: transparent; 
    max-height: 173px;
    overflow-x: auto; 
}
.custom-select {
    background: #FFF;
    display: inline-block;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    vertical-align: middle;
    border: #333 1px solid;
    color: #444;
    border-radius: 2px;
    width: 100%;
    cursor: pointer;
}
.custom-select img{
    margin: -4px 0px;
    float:right;
    height: 20px;
}
div#custom-select-option-box{
    max-height: 113px;
    min-height: 113px;
    overflow-x: auto;
    background: #FFF;
    border: #80b2bb 1px solid;
    color: #3892a2;
    border-radius: 2px;
    width: 100%;
    z-index: 1;
    display: none;
}
.custom-select-option{
    width: 100%;
    padding: 5px 15px;
    margin: 1px 0px;
    cursor: pointer;
}
.custom-select:hover{
    background: #e9e9e9;
}
result-list{
    padding-bottom: 20px;
    color: #333;
    line-height: 25px;
}
html,body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
/***************** Lista allegati ******************/
#listaAllegati th{
    line-height: 30px;
}
#listaAllegati td{
    line-height: 18px;
}
#tile{
    background: rgba(190,190,190,0.2);
    display: inline-block;
    margin: 5px;
    padding: 10px;
    color: #333;
    font-weight: 700;
    border-radius: 6px;
}
#tile button{
    border: none;
    color: red!important;
}

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<body>

  <div id="customSelect">
    <div class="custom-select" id="custom-select">Seleziona gli allegati<img src="https://png.icons8.com/ios/50/000000/down-squared-filled.png"></div>
    <div id="custom-select-option-box">
      <div class="custom-select-option">
        <input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="name" value="<a href='#'>link</a>">link
      </div>
      <div class="custom-select-option">
        <input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="name" value="<a href='#'>link2</a>">link2
      </div>
      <div class="custom-select-option">
        <input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="name" value="<a href='#'>link3</a>">link3
      </div>
      <div class="custom-select-option">
         <input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="name" value="<a href='#'>link4</a>">link4
      </div>
    </div>                        
  </div>
  <div id="listaAllegati">
    
  </div>
</body>

я попробовал следующие способы:

функция нажатием кнопки onclick="$(this).parent().remove()"

функция включена на $("#listaAllegati #tile").on("click", "#closeTile", function(){...}); $("#listaAllegati #tile").on("click","button#closeTile", function(){...}); $(document).on("click","button#closeTile", function(){...}); $(document).on("click","#closeTile", function(){...});

, но ни одна из этих работ, когда я поместил ее на страницу Sharpoint, и я действительно не знал, как достичь этого намомент

Answer 1

Удалить #tile из вашего события клика.Это будет работать только с одним родителем.Таким образом, ваш обновленный код будет

 $("#listaAllegati").on("click","#closeTile", function(){
        $(this).parent().remove(); 
    });