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

Question

我正在生成类和id发生变化的div。它们都是一样的，每个都有一个删除按钮。我想删除点击按钮所在的div。每个按钮都是"past_experience_index"div中的id"delete_index"。事实上，当我点击delete_2时，我希望删除past_exprience_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函数作为函数参数。

<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，你真的不需要担心id。您可以使用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>