0

我有一些 jquery 我想用来动态创建表单元素，我可以添加全新的表单元素，但我在删除它们时遇到了问题。

我正在尝试删除整个 HTML 块，但不是删除我要删除的块，而是删除所有 HTML 直到标记

我可以添加任意数量的表单元素（在 div 组中），我可以单独删除它们，直到它到达最后一个，然后删除我添加的组以及页面中我不想删除的静态 html。

我认为这与 parentsUntil() 有关，但不知道删除该代码块中所有 HTML 的另一种方法。

HTML

<form enctype="multipart/form-data" id="adminForm" action="" method="post">
    <div class="group" id="fixed">
        <p class="hint">Please enter a welcome message for the newsletter.</p>
        <label class="formlabel" for="welcome">WELCOME MESSAGElabel><br />
        <input type="text" class="text-input" name="welcome" id="welcome" />
    </div>
    <p><span id="addVar">Add Variable</span></p>
</form>

查询

var startingNo = 0;
var $node = "";
for(varCount=0;varCount<=startingNo;varCount++){
    var displayCount = varCount+1;

    $node = "<div class=\"article\">\n\t<div class=\"group\">\n\t\t<p class=\"hint\">Please enter a title for article "+displayCount+".</p>\n\t\t<label class=\"formlabel\" for=\"article_title"+displayCount+"\">ARTICLE TITLE "+displayCount+"</label><br />\n\t\t<input type=\"text\" name=\"article_title"+displayCount+"\" id=\"article_title"+displayCount+"\" class=\"text-input\" />\n\t</div>\n\t<div class=\"group\">\n\t\t<p class=\"hint\">Please enter the content for article "+displayCount+".</p>\n\t\t<label class=\"formlabel\" for=\"article_content"+displayCount+"\">ARTICLE CONTENT "+displayCount+"</label><br />\n\t\t<textarea rows=\"10\" cols=\"50\" class=\"text-input\" name=\"article_content"+displayCount+"\" id=\"article_content"+displayCount+"\"></textarea>\n\t</div>\n\t<div class=\"group\">\n\t\t<span class=\"removeVar\">Remove Article</span>\n\t</div>\n</div>";
}
$('#fixed').append($node);

$('#adminForm').on('click', '.removeVar', function(){
    $(this).parentsUntil($('#adminForm')).remove();
    //varCount--;
});

$('#addVar').on('click', function(){
    //new node
    varCount++;

    $node = "<div class=\"article\">\n\t<div class=\"group\">\n\t\t<p class=\"hint\">Please enter a title for article "+varCount+".</p>\n\t\t<label class=\"formlabel\" for=\"article_title"+varCount+"\">ARTICLE TITLE "+varCount+"</label><br />\n\t\t<input type=\"text\" name=\"article_title"+varCount+"\" id=\"article_title"+varCount+"\" class=\"text-input\" />\n\t</div>\n\t<div class=\"group\">\n\t\t<p class=\"hint\">Please enter the content for article "+varCount+".</p>\n\t\t<label class=\"formlabel\" for=\"article_content"+varCount+"\">ARTICLE CONTENT "+varCount+"</label><br />\n\t\t<textarea rows=\"10\" cols=\"50\" class=\"text-input\" name=\"article_content"+varCount+"\" id=\"article_content"+varCount+"\"></textarea>\n\t</div>\n\t<div class=\"group\">\n\t\t<span class=\"removeVar\">Remove Article</span>\n\t</div>\n</div>";

    $(this).parent().before($node);
});
4

1 回答 1

1

通过使用过滤掉#fixeddiv.not()

$('#adminForm').on('click', '.removeVar', function () {
    $(this).parentsUntil($('#adminForm')).not('#fixed').remove();
    //varCount--;
});
于 2013-10-28T13:49:26.280 回答