Question

我正在尝试创建一个选举模拟器。我有一个表单域和一个添加更多字段的链接。无论我在字段中写什么，都显示在字段下方。当我点击“删除”时，它会删除表单字段，但不会删除下面的相应文本。这是我想要解决的问题。

HTML

    <h2><a href="#" id="addParty">Add new party</a></h2>
<div id="partiesDiv">
    <p>
        <label for="parties"><input type="text" id="party" size="20" name="party" value="" placeholder="Party name" onkeyup="updateTxt('party','txt');"></label>
    </p>
</div>
<div id="text">
    <p>
        <span id="txt"></span>
    </p>
</div>

的javascript

$(function() {
    var partyDiv = $('#partiesDiv');
    var textDiv = $('#text');
    var i = $('#partiesDiv p').size() + 1;

    $('#addParty').live('click', function() {
            $('<p><label for="parties"><input type="text" id="party_' + i +'" size="20" name="party" value="" placeholder="Party name" onkeyup="updateTxt(\'party_' + i +'\',\'txt' + i +'\');"/></label> <a href="#" id="remParty">Remove</a></p>').appendTo(partyDiv);
            $('<p><span id="txt' + i +'"></span></p>').appendTo(textDiv);
            i++;
            return false;
    });

    $('#remParty').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});


function updateTxt(field,toField){
var field = document.getElementById(field);
var toField = document.getElementById(toField);
toField.innerHTML=field.value;
}

当我添加几个字段时，html看起来像这样：

<div id="partiesDiv">
    <p>
        <label for="parties"><input type="text" id="party" size="20" name="party"
         value="" placeholder="Party name" onkeyup="updateTxt('party','txt');">
        </label>
    </p>
    <p>
        <label for="parties"><input type="text" id="party_2" size="20" name="party"
         value="" placeholder="Party name" onkeyup="updateTxt('party','txt');">
        </label> <a href="#" class="remParty">Remove</a> <--- WHEN I CLICK HERE
    </p>
</div>
<div id="text">
    <p>
        <span id="txt"></span>
    </p>
    <p>
        <span id="txt2"></span>
    </p> <--- I WANT THIS <p> TO BE REMOVED
</div>

我猜测的是，我应该在$(this).parents('p').remove();下面添加一行，删除p中的div id="text"。问题是我不知道如何让它知道要删除哪个p。

我是JavaScript的新手，这可能是我的头脑，所以如果我要澄清任何事情，请告诉我！感谢

Answer 1

您可以使用以下代码将最近的

元素移除到字段的父元素：

$(this).parent.closest('p').remove();

您可以阅读更多关于“最近”方法http://api.jquery.com/closest/

的内容

Answer 2

我不那么漂亮的解决方案：

$('#addParty').live('click', function() {
        $('<p><label for="party"><input type="text" id="party_' + i +'" size="20"
        name="party" value="" placeholder="Skriv partinamn" 
        onkeyup="updateTxt(\'party_' + i +'\',\'txt' + i +'\');"/></label> 

        <a href="#" *****class="remParty' + i +'"*****>Remove</a></p>')

        .appendTo(partyDiv);
        $('<p><span id="txt' + i +'"></span></p>').appendTo(textDiv);
        i++;
        return false;
    });

为每个创建的新字段class="remParty"附加i。

然后我添加

$('.remParty2').live('click', function() { $(this).parents('p').remove();
$("p:has(#txt2)").remove(); if(i==2){i--;} return false; });

我想要允许的最大数量的次数。

Answer 3

老兄，你必须更新你的jquery方法。

从jQuery 1.8开始，不推荐使用.size()方法。请改用.length属性。

从jQuery 1.7开始，不推荐使用.live()方法。使用.on()附加事件处理程序。

使用.closest()将最近的父母称为您想要的<p>标记。

请记住使用类'.remParty'而不是ID '#remParty'，因为如果您有多个具有相同ID的元素，则无效。

演示：

http://jsfiddle.net/EhjM7/

我为你重写了它：

$(function() {
    var i = $('#partiesDiv p').length + 1;

    $(document).on('click','#addParty',function(e) {
        e.preventDefault();
        $('#partiesDiv').append('<p><label for="parties"><input type="text" id="party_' + i +'" size="20" name="party" value="" placeholder="Party name" onkeyup="updateTxt(\'party_' + i +'\',\'txt' + i +'\');"/></label> <a href="#" class="remParty">Remove</a></p>');
       $('#text').append('<p><span id="txt' + i +'"></span></p>');
       i++;
       return false;
    });

    $(document).on('click','.remParty',function(){ 
        $(this).closest('p').remove();
        i--;
        return false;
    });
});


function updateTxt(field,toField){
    var field = document.getElementById(field);
    var toField = document.getElementById(toField);
    toField.innerHTML=field.value;
}

Answer 4

首先，当您多次使用id属性时， NOT 应该使用id属性。页面中可能只有一个ID具有相同的值！

如果要删除由其子项选择的上部元素，可以使用:has()选择器。

$("p:has(#txt2)").remove();

让我们再来一次：）

$('#addParty').live('click', function() {
    $('<p><a href="#" data-party-id="'+i+'" id="remParty">Remove</a></p>').appendTo(partyDiv);
    $('<p><span data-party-id="'+i+'"></span></p>').appendTo(textDiv);
});

我确实将data-party-id分配给两个元素，因为我们以后可以轻松地引用它们。

现在让我们去除魔法吧。

$('.remParty').live('click', function() { 
    // learn something about data attributes and data()
    var partyId = $(this).data("party-id");
    $('p:has([data-party-id="' + partyId + '"])').remove();
});

但如果您将标识分配给p而不是范围，那将会容易得多。然后，您不需要:has()选择器

从容器外部删除元素

4 个答案: