单击按钮删除div (更改id)

Question

我生成的div随类和id的变化。它们都是一样的，每个都有一个删除按钮。我想删除点击按钮所在的div。每个按钮作为id "delete_index“在"past_experience_index”div中。事实上，当我单击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

在按钮上定义一个onclick函数，单击pass $index作为函数参数。

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

现在您必须在javascript中定义这个函数，如下所示。

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，您实际上不需要担心If。您可以使用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>

​