why I can't delete paragraph?

Question

I want to delete the paragraph that jquery create when I click the paragraph.

<p class="test">cutsom event</p>
<button class="clcik">click</button>

jquery:

$(function () {
"use strict";

$(".test").on("click", function () {
    $(this).hide();
});

$("button").on("click", function () {
    $("<p>delet this paragraph</p>").insertAfter($(this));
});

$("p").on("click", function () {
    (this).hide();
});
});

update: @LinkinTED solved it, but dose there best practice for for that code?

@akram `clcik` is misspelled. It probably doesn’t affect your JavaScript code, but just so you know. — Sebastian Simon, Oct 06 '17 at 09:09
$(".click").click(function(){ var p = $("
deleat this
") $("body").append(p); $(p).click(function(){ $(this).remove(); }) }) — vicky patel, Oct 06 '17 at 11:41

score 6 · Answer 1 · edited Oct 06 '17 at 09:12

6

When you call this:

$("p").on("click", function () {
    $(this).hide();
});

your paragraph doesn't exist yet, so this doesn't actually do anything.

You can do $('body').on('click','p', function(){}) instead

edited Oct 06 '17 at 09:12

GreyRoofPigeon

17,833
4
36
59

answered Oct 06 '17 at 09:08

TKoL

13,158
3
39
73

console said this Uncaught TypeError: "p".hide is not a function when i put this `$('body').on('click', 'p', function () { ("p").hide(); });` – akram Oct 06 '17 at 09:27
You are forgetting the `$` (again) `$("p").hide();` – GreyRoofPigeon Oct 06 '17 at 09:31

score 1 · Accepted Answer · answered Oct 06 '17 at 09:11

Your function will work on the paragraphs that are static in the page. However the dynamic added paragraphs won't. You'll need to bind the function on a static element.

$(function () {
  /* obsolute while the last function is the same 
  $(".test").on("click", function () {
    $(this).hide();
  });*/

  $("button").on("click", function () {
    $("<p>delet this paragraph</p>").insertAfter($(this));
  });

  $(document).on("click", "p", function () {
    $(this).hide();
//  ^------ you forgot the $ here
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="test">cutsom event</p>
<button class="click">click</button>

why I can't delete paragraph?

2 Answers2