Question

Initially, when users click the delete button, I want the whole line of elements are removed.

This is for adding a line of elements when add button is being pressed:

function btnPlsClickEvent(btn){
btn.remove(".buttonPlus");
$(".buttonMinus").show();
//$("#q" + questionCount).append("<p id='q'+ '" + ++questionCount + "' + ''>Question: " + questionCount + "<input type='text'>\
$("#q1").append("<p id='q'+ '" + ++questionCount + "' + ''>Question: " + questionCount + "<input type='text'>\
<button type='button' class='buttonPlus'></button>\
<button type='button' class='buttonMinus' id='"+ questionCount +"'></button></p>");

$(".buttonMinus:last").hide();  

//Because it's dynamically appended, I re-bind them in this way:
//Re-binding
var newBtnPlus = $(".buttonPlus:last");
var newBtnMinus = $(".buttonMinus:last");
newBtnPlus.click(function(){
    btnPlsClickEvent(newBtnPlus);   //ATTENTION!
});
newBtnMinus.click(function () {
    btnMnsClickEvent(this);     //ATTENTION! Is it passing btn which is at the head of the function? If so, it should refer to Plus button.
});

alert("Add a question.");}

So, if I want to delete the whole line, I should find its parent

and call .remove().

function btnMnsClickEvent(btn) {
alert("You have deleted #" + btn.id + " question.");
btn.parent().remove();}

The question #1 is: I can correctly get the id of the minus button, using btn. But how come I can’t refer to itself or its parent and remove it?

Q #2 is: Why I can remove btn’s class at the head of btnPlsClickEvent() but I can’t do so in btnMnsClickEvent()? I know I am using two different ways to pass different object to btnPlsClickEvent() and btnMnsClickEvent(). What’s the differences of them?

Thank you very much,
Ashley

Answer 1

1# Try to change your remove() line to:

$( btn ).parent().remove();

The function get object of the html dom element btnMnsClickEvent(this);, and you need to wrap it with jquery

2# the second function get object of jquery elements, so there is no problem there