單擊按鈕刪除 div（更改 id）

Question

我正在使用 class 和 id 更改生成 div。 它們都是一樣的，每個都有一個刪除按鈕。 我想刪除單擊按鈕所在的 div。 每個按鈕作為“past_experience_index”div 中的 id “delete_index”。 事實上，當我點擊 delete_2 時，我希望將 past_experience_2 刪除。

我嘗試了幾件事，但它不起作用......

這是 PHP：

<div class="experiences_container">
    <?php 
    if (!empty($experiences)) {
        $index = 0;
        foreach ($experiences as $key) {
        ?>
            <div id="past_experience_<?=$index?>" class="past_experience">
                <div class="experience_header">
                    <div>
                        <label for="team">Nom de l'équipe</label>
                            <input class="team" name="team_<?= $index ?>" value="<?= $key['team-name'];?>"/>
                    </div>
                    <div>
                        <label for="role">Rôle dans l'équipe</label>
                            <input class="role" name="role_<?= $index ?>" value="<?= $key['team-role'];?>"/>
                    </div>
                </div>

                <div class="experience_textarea">
                    <label for="description">Description du rôle</label>
                    <textarea class="description" name="description_<?= $index ?>"><?= $key['team-description']; ?></textarea>

                    <label for="palmares">Palmarés avec l'équipe</label>
                    <textarea class="palmares" name="palmares_<?= $index ?>"><?= $key['team-palmares']; ?></textarea>
                </div>
                <p id="delete_<?=$index?>" class="delete_button">supprimer</p>
            </div>  
        <?php
        $index++;
        } 
    } else {
    ?>
    <div><p>Vous n'avez encore rentré aucune expérience</p></div>
    <?php 
}?>
</div>

因此，作為 JavaScript 初學者，我嘗試了一個帶有 php 索引值限制的 for() ，但它不起作用。 $("div").remove(past_experience_index) 有效，但我沒有實際的索引。

非常感謝

Answer 1

在按鈕單擊傳遞 $index 時定義 onclick function 作為 function 參數。

<p id="delete_<?=$index?>" class="delete_button" onclick="del_div_fun('<?php echo $index ?>')">supprimer</p>

現在你必須在 javascript 中定義這個 function 。

function del_div_fun(index_val){
var div_id = 'past_experience_'+index_val;
$('#'+div_id).remove();
  }//end of function del_div_fun

請使用 jquery 庫

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

如果你使用 jquery 你真的不需要擔心 ids。 您可以使用 jQuery 找到父級並將其刪除。

像這樣的東西：

 $(".delete-btn").click(function(){ $(this).parent().remove() })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="padding:10%;background-color:lightgrey;text-align:center;"> <p style="cursor:pointer;" class="delete-btn">Delete</p> </div>

Answer 3

可能您不需要在任何地方復制索引。

您可以避免將 jquery 添加到您的頁面中。

 <script> function deletePastExperience() { var experiencesContainer = document.querySelector('.experiences_container'); var elementToRemove = document.getElementById(event.target.parentElement.id); experiencesContainer.removeChild(elementToRemove); } </script>

 <p onclick="deletePastExperience()" class="delete_button">supprimer</p>