Javascript 只返回jQuery<；李>；元素文本

我使用jQuery向动态添加的列表元素添加了一个.on（）函数。我面临的问题是，触发单击的按钮存在于动态添加的li元素中，因此

$(this).parent().text()

返回li元素的文本以及按钮的文本

看下面的小提琴：

如何绕过此问题，只显示li文本（不显示按钮文本）？我是否必须以一种将按钮放置在li标记之外的方式重新编写代码

更新

---

在我接受其中一个答案之前——顺便说一句，所有答案都有效，谢谢你，你能给我解释一下使用一种或另一种方法的优缺点吗？即textNode vs span tag。

如果

textNode

是单击按钮的上一个同级，你可以使用

previousSibling

属性

$("#list").on('click', 'button', function() {
    alert(this.previousSibling.nodeValue);
});

---

如果

textNode

是单击按钮的上一个同级节点，则可以使用

previousSibling

属性

$("#list").on('click', 'button', function() {
    alert(this.previousSibling.nodeValue);
});

---

尝试添加包装在跨距中的文本。稍后，您应该轻松解决兄弟姐妹的价值：

var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
          $('#list').append("<li><span>" + item + "</span><button class='clickme'>Click me</button></li>");
        });


$("#list").on('click', 'button', function() {
      alert($(this).siblings().text());
    });

var数组=[“第一”、“第二”、“第三”]；
$.each（数组、函数（索引、项）{
$（“#列表”）。追加（“
”+项+”单击我“
”；
});
$（“#列表”）。在（'单击'，'按钮'，函数（）上{
警报（$（this.sibbines（）.text（））；
});

---

优点（使用span）：更好地管理li中的文本。实际上，您总是引用span中包含的内容

---

优点（不使用span）：HTML中需要注意的较小标记。虽然在这种情况下，我会说这更像是一种微观管理。请尝试添加包装在跨距中的文本。稍后，您应该轻松解决兄弟姐妹的价值：

var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
          $('#list').append("<li><span>" + item + "</span><button class='clickme'>Click me</button></li>");
        });


$("#list").on('click', 'button', function() {
      alert($(this).siblings().text());
    });

var数组=[“第一”、“第二”、“第三”]；
$.each（数组、函数（索引、项）{
$（“#列表”）。追加（“
”+项+”单击我“
”；
});
$（“#列表”）。在（'单击'，'按钮'，函数（）上{
警报（$（this.sibbines（）.text（））；
});

---

优点（使用span）：更好地管理li中的文本。实际上，您总是引用span中包含的内容

---

优点（不使用span）：HTML中需要注意的较小标记。尽管在这种情况下，我想说的是，考虑它更像是一种微观管理。

我认为最简单的解决方案是在文本周围添加

span

：

$('#list').append("<li><span>" + item + "</span><button class='clickme'>Click me</button></li>");

---

我认为最简单的解决方案是在文本周围添加

span

：

$('#list').append("<li><span>" + item + "</span><button class='clickme'>Click me</button></li>");

var数组=[“第一”、“第二”、“第三”]；
$.each（数组、函数（索引、项）{
$（“#列表”）。追加（“
”+项+”单击我“
”；
});
$（“#列表”）。在（'单击'，'按钮'，函数（）上{
警报（$（this.parent（）.find（“span”）.text（））；
});

将文本放入span标记中

var数组=[“第一”、“第二”、“第三”]；
$.each（数组、函数（索引、项）{
$（“#列表”）。追加（“
”+项+”单击我“
”；
});
$（“#列表”）。在（'单击'，'按钮'，函数（）上{
警报（$（this.parent（）.find（“span”）.text（））；
});

将文本放入span标记中

---

或者，您可以这样做，而不是将其分开：

var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
    $("<li>" + item + " <button class='clickme'>Click me</button></li>")
       .appendTo('#list')
       .on('click', function() { alert(item); });
});

var数组=[“第一”、“第二”、“第三”]；
$.each（数组、函数（索引、项）{
$（“
”+项目+“单击我”
）
.appendTo（“#list”）
.on（'click'，function（）{alert（item）；}）；
});

---

当然，除非你以其他方式添加这些。然后我会使用其他建议的答案之一。

或者，您可以这样做，而不是将其分开：

var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
    $("<li>" + item + " <button class='clickme'>Click me</button></li>")
       .appendTo('#list')
       .on('click', function() { alert(item); });
});

var数组=[“第一”、“第二”、“第三”]；
$.each（数组、函数（索引、项）{
$（“
”+项目+“单击我”
）
.appendTo（“#list”）
.on（'click'，function（）{alert（item）；}）；
});

---

当然，除非你以其他方式添加这些。然后我将使用其他建议的答案之一。

您可以克隆元素并删除子元素：

$(this).parent().clone().children().remove().end().text()

---

您可以克隆元素并删除子元素：

$(this).parent().clone().children().remove().end().text()

---

就正反两方面而言，我认为这两种解决方案都具有相当的可比性。我能想到的唯一一个span优势是，如果将来添加其他元素，

previousSibling

解决方案可能会失败，而

span

解决方案将继续工作。就利弊而言，我认为这两种解决方案是相当相似的。我能想到的唯一一个span优势是，如果将来添加其他元素，

previousSibling

解决方案可能会中断，而

span

解决方案将继续工作。