Javascript 单击“删除”按钮不起作用

我试图在JSFIDLE中执行jquery代码。下面给出了我的jquery代码

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').on('click', function() { 
        alert("sfdrijg");
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

$（函数（）{
var scntDiv=$（'p#u scents'）；
变量i=$（'#p#p'）.size（）+1；
$（'#addScnt'）。在（'单击'，函数（）上）{
$（'p>
'）。附录（scntDiv）；
i++；
返回false；
});
$（'#remScnt'）。在（'click'，function（）{
警报（“sfdrijg”）；
如果（i>2）{
$（this.parents（'p'）.remove（）；
我--；
}
返回false；
});
});

下面给出了我的HTML代码

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
<p>
    <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
</p>
</div>

我的页面看起来像这样

---

单击“添加另一个输入框”始终有效，而“删除”则完全没有响应

尝试将代码更改为

$（文档）。在（'click'，'remScnt'，function（）{

---

请参阅这是一个很好的答案，以了解更多详细信息。

尝试将代码更改为

$（文档）。在（'click'，'remScnt'，function（）{

有关更多详细信息，请参阅这是一个很好的答案。

工作演示：

I.您的代码将创建多个具有相同名称的ID

remScnt

，这是不正确的。您必须添加该元素的类，例如

class=“remScnt”

页面中的id必须是唯一的。如果要描述一组元素，请使用类。

原因：-您的代码不会被W3C验证，这意味着您的网站在不同浏览器之间的兼容性可能会让您头疼。它可以在一个浏览器中正常工作，而在另一个浏览器中则无法正常工作

因此，尝试为元素添加唯一的ID

II您还必须更改代码，如下所示：

$(document).on('click','.remScnt', function() { /* Code goes here */ });

原因：事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on（）时存在于页面上。在调用$.on（）时，动态添加的元素不存在，因此不会绑定事件

请尝试以下代码：

$(document).on('click','.remScnt', function() { 
    alert("sfdrijg");
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        // you don't need to add return false            
});

工作演示：

I.您的代码将创建多个具有相同名称的ID

remScnt

，这是不正确的。您必须添加该元素的类，例如

class=“remScnt”

页面中的id必须是唯一的。如果要描述一组元素，请使用类。

原因：-您的代码不会被W3C验证，这意味着您的网站在不同浏览器之间的兼容性可能会让您头疼。它可以在一个浏览器中正常工作，而在另一个浏览器中则无法正常工作

因此，尝试为元素添加唯一的ID

II您还必须更改代码，如下所示：

$(document).on('click','.remScnt', function() { /* Code goes here */ });

原因：事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on（）时存在于页面上。在调用$.on（）时，动态添加的元素不存在，因此不会绑定事件

请尝试以下代码：

$(document).on('click','.remScnt', function() { 
    alert("sfdrijg");
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        // you don't need to add return false            
});

---

您尚未提供删除按钮的html代码

无论如何，如果您的移除按钮是您试图移除的元素的直接子元素，那么您应该使用.parent（）。它应该可以正常工作。并且您不需要返回任何内容

因此：

---

您尚未提供删除按钮的html代码

无论如何，如果您的移除按钮是您试图移除的元素的直接子元素，那么您应该使用.parent（）。它应该可以正常工作。并且您不需要返回任何内容

因此：

---

---

请解释一下，这有什么不同？谢谢，解决方案起作用了，但为什么另一个不起作用。后来添加到dom的对象上的事件绑定需要这样做format@Teemu这些dom元素是动态添加的。我知道，但OP显然不是。答案应该不仅仅是一段代码。请解释一下，这有什么不同nt？谢谢，解决方案奏效了，但为什么另一个不奏效。添加到dom的对象上的事件绑定需要这样做format@Teemu我知道这些dom元素是动态添加的，但OP显然不是。答案应该不仅仅是一段代码。他提供了删除按钮的HTML，请阅读问题专业版另外，请务必阅读我上面的答案。具有相同ID的多个元素不是有效的html。错过了，干得好。你看到了一个ID为#remScnt的html元素吗？是的，请看jquery代码，他在js中添加了remove button DynamicalYoh。好的，我错了，在这里拉了一个通宵。他提供了remove button的html，请阅读stion properlyAlso，请务必阅读我上面的答案。具有相同ID的多个元素不是有效的html。错过了，干得好。您看到ID为#remScnt的html元素了吗？是的，请参阅jquery代码，他正在js中添加remove button dynamiccallyoh。好的，我错了，在这里拉一个通宵。您需要使用格式Jithin您需要格式J使用的卵磷脂