CODEWITHSUNDEEP
javascriptjquery
liz
liz

Reputation: 1

Why won't my button delete?

document.getElementById("roster").innerHTML += "<button onclick=\"doSomething()\">+</button>\n" +
                                                    "<span onClick=\'$(this).remove();" +
                                                    "$(this).prev().remove();" +
                                                    "oiDelete(\"" + str + "\");" +
                                                    "removeCost(\"" + str + "\");" +
                                                    "selectedItem(\"" + str + "\");" +
                                                    "frDelete(\"" + str + "\")\';>" +
                                                    str + "</span><br>";

So this goes inside a Javascript function I'm working on. What it's supposed to do is create clickable text regions (spans) that disappear when clicked as well as generate a button right before the clickable text that is supposed to be removed when the text is clicked. I can get the text to disappear just fine, but I can't get the darn button to go away.

The code being generated is:

<button onclick="doSomething()">+</button>
<span onclick="$(this).remove();
$(this).prev().remove();
oiDelete("Marneus Calgar");
removeCost("Marneus Calgar");
selectedItem("Marneus Calgar");
frDelete("Marneus Calgar")" ;="">Marneus Calgar</span>

Why is it generating ="" at the end of the opening span tag? why is the button not deleting properly? is $(this).prev().remove() not the correct option?

Upvotes: 0

Views: 128

Answers (2)

Neuronus
Neuronus

Reputation: 66

You messed up quotation marks and of course - call self-remove code at the end (!)

And one tip - encapsulate these additional function in one procedure - it help to keep code cleaner.

document.getElementById('roster').innerHTML += '<button onclick=\'doSomething()\'>+</button>' +
'<span onClick="doCalls(); $(this).prev().remove(); $(this).remove(); ">' + str + '</span><br>';

Upvotes: 0

syanaputra
syanaputra

Reputation: 590

If we cast aside best practice, this is the working code.

document.getElementById("roster").innerHTML += "<button onclick=\"doSomething()\">+</button>\n" +
                                                "<span onClick=\'$(this).prev().remove();" +
                                                "$(this).remove();" +
                                                "oiDelete(\"" + str + "\");" +
                                                "removeCost(\"" + str + "\");" +
                                                "selectedItem(\"" + str + "\");" +
                                                "frDelete(\"" + str + "\")\'>" +
                                                str + "</span><br>";

The reason why your code doesn't work is because you are removing the span which has onclick function on the fly. It means it can't reach the $(this).prev().remove() bit.

I hope it makes sense.

If you want to go an extra mile, you should put $(this).remove(); after the frDelete() function. Otherwise those 4 functions that you call will never be called.

Upvotes: 2

Related Questions