单击按钮时删除特定行

Remove specific lines on button click

本文关键字:删除 按钮 单击      更新时间:2023-09-26

如果我有以下内容:

<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<input type="submit" value="Submit" />

如何在点击提交按钮后删除(div test1 和 test3)?

试试这个:

var button = document.querySelector('input[type="submit"]');
button.onclick = function(event) {
    event.preventDefault();
    var ids = ['test1','test3'];
    var count = ids.length;
    while(count--) {
        document.getElementById(ids[count]).remove();
    }
};
<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3">test3</div>
<div id="test4">test4</div>
<input type="submit" value="Submit" />

使用 jQuery,你应该有这样的东西 jsFiddle :

$(document).ready(function(){
    $('#submit-btn').click(function(e){
        e.preventDefault();
        $('#test1, #test3').remove();
    })
});

你可以尝试使用JQuery隐藏手风琴,这里有一个例子:

把它放在你的头标签中:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("#1, #3").hide();
    });
    $("#show").click(function(){
        $("#1, #3").show();
    });
});
</script>

这是你的身体标签:

<div id="1">If you click on the "Hide" button, I will disappear.</div>
<div id="2">If you click on the "Hide" button, I will disappear.</div>
<div id="3">If you click on the "Hide" button, I will disappear.</div>
<div id="4">If you click on the "Hide" button, I will disappear.</div>
<button id="hide">Hide</button>
<button id="show">Show</button>