Question

我正在使用select2作为我的一个下拉列表，并且在进行选择时我有一个jquery事件监听器。基本上，一旦做出选择，那么该选择将被填充到ul元素中。 li中ul元素的文本部分将有一个按钮，用于从ul中删除该选项。如果该选项已从ul中删除，则会将其填充回我的选择列表中。

以下是我的jQuery，用于将所选选项添加到ul：

$("#My-DDL").on("select2:select",
    function (evt) {
        console.log(evt.params);
        $("#My-UL-Element").append("<li class='list-group-item list-group-item-info text-dark' data-id='" +
            evt.params.data.id +
            "' ><small>" +
            evt.params.data.text +
            "</small> <button type='button' class='close remove-button'>&times;</button></li>");
        $("#My-DDL option[value='" + evt.params.data.id + "']").remove();
        $("#My-DDL").val("").change();
    });

以下是我的jQuery，用于从ul元素中删除选项并填充回My-DDL：

function removeCapability() {
    $("#My-UL-Element").on("click",
        ".remove-button",
        function () {
            console.log($(this).parent().text());
            console.log($(this).parent().data("id"));
            var elementId = $(this).parent().data("id");
            $("#My-DDL").append(new Option($(this).parent()
                .text(),
                elementId)); // add item back to dropdownlist

            /* sort the dropdownlist options back to the original way */
            var selectList = $("#My-DDL option");
            selectList.sort(function (a, b) {
                a = a.value;
                b = b.value;
                return a - b;
            });
            $("#My-DDL").html(selectList);
            /* End of Sort */

            $(this).parent().remove(); // remove item from ul element
        });
}

现在，我的问题涉及从ul移除项目并填充回选择项的第二部分。删除某个项目时，$(this).parent().text()包含按钮中的× ..我可以理解，因为它是该元素的文本，但我该怎么做忽略按钮文字？

更新

通过关注small元素内的文本，可以回答上述问题。让我用不同的场景重新说明..如果文本没有small元素，我将如何实现这一目标？

$("#My-DDL").on("select2:select",
    function (evt) {
        console.log(evt.params);
        $("#My-UL-Element").append("<li class='list-group-item list-group-item-info text-dark' data-id='" +
            evt.params.data.id +
            "' >" +
            evt.params.data.text +
            " <button type='button' class='close remove-button'>&times;</button></li>");
        $("#My-DDL option[value='" + evt.params.data.id + "']").remove();
        $("#My-DDL").val("").change();
    });

Answer 1

由于你在这种情况下从列表中删除LI，你可以先从LI中删除按钮，然后获取LI文本内容......

但最好是，您宁愿将所需信息存储在自定义数据属性中或使用https://api.jquery.com/data/，以便您可以从那里再次检索它 - 以便通过其他按钮“污染”文本值等等无关紧要。

通过这种方式，您可以将实际数据与演示文稿分开。无论您在以后的某个时间点应用/添加到LI中显示的文本，还不会影响您的脚本。

Answer 2

一个快速的vanilla JS函数，用于获取父项中的文本节点，并将它们连接成一个字符串：

＆＃13;

function getText(el) {
  return Array.from(el.childNodes).filter(e =>
    e.nodeType == 3 // text node
  ).map(e =>
    e.nodeValue
  ).join(" ");
}

console.log(getText(document.getElementById("demo")));

＆＃13;

<div id='demo'>
  Part 1
  <button>Button!</button>
  Part 2
</div>

＆＃13;

jQuery .text（）包括按钮的文本

2 个答案: