[英]Delete a div on a button click (changing id)
我正在使用 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) 有效,但我没有实际的索引。
非常感谢
在按钮单击传递 $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>
如果你使用 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>
可能您不需要在任何地方复制索引。
您可以避免将 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.