I'm generating div with class and id changing. They are all the same and each one has a delete button. I want to delete the div in which the clicked button is. Each button as the id "delete_index" in a "past_experience_index" div. In fact, when i click on delete_2, i want past_experience_2 to be deleted.
I tried several things but it does not work...
Here is the 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>
So as a JavaScript beginner, i tried a for() with the php index value limit but it doesn't work. The $("div").remove(past_experience_index) works, but i can't have the actual index.
Thanks a lot
Define an onclick function on button click pass $index as a function argument.
<p id="delete_<?=$index?>" class="delete_button" onclick="del_div_fun('<?php echo $index ?>')">supprimer</p>
Now you have to define this function in javascript like.
function del_div_fun(index_val){
var div_id = 'past_experience_'+index_val;
$('#'+div_id).remove();
}//end of function del_div_fun
Please use jquery library
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If your using jquery you don't really need to worry about ids. You can use jQuery to find the parent and remove it that way.
Something like this:
$(".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>
Probably you don't need to duplicate indexes everywhere.
And you can avoid adding jquery into your page.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.