如何删除特定的按钮？

你好我对编码有点新，所以如果我不理解你使用的一些术语，那么请耐心等待。如何删除特定的按钮？

所以基本上我有2个按钮，其功能是添加和删除按钮。一旦添加了按钮，按钮的功能就是显示用户的位置。

当前按钮被最后一个按钮删除。我如何选择删除特定的按钮？

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <style> 
    button{ 
    height:100px; 
    width: 80px; 
    text-align: center; 
    margin: 5px 4px; 
    } 
    #mainButtons button{ 
    display: inline-block; 
    margin: auto; 
    } 
    </style> 


<div id="mainButtons"> 
<button onclick="addButton()">Add Contact</button> 
<button onclick="removeButton()">Remove Contact</button> 
</div> 
    </br> 
<div id="que"></div> 

<script> 
var increment = 0; 
function addButton(){ 
    var id = 'btn' + (increment++); 
    var que = $("#que"); 
    var el = $("<button id='"+id+"'>Click for location</button>"); 
    que.append(el); 
    clickHandler(el); 
} 

function removeButton(){ 
    if (increment >= 0) { 
    $("#btn"+(increment-1)).remove(); 
    increment--; 
    } 
} 

    function clickHandler(el) { 
    el.click(function() { 
    getLocation(el); 
    }); 
} 

function getLocation(el) { 
    el.html("Loading...."); 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { showPosition(el, position); }); 
    } else { 
    el.html("Geolocation is not supported by this browser."); 
    } 
} 

function showPosition(el, position) { 
    el.html("Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude); 
} 


</script> 
</body> 
</html>

来源

2017-08-19 Jai Fiz

通过这个'$（ “＃BTN” +（增量-1）），删除（）;'你已经与ID'BTN1/2/3删除特定键.. 。' –

它被用来删除最后一个按钮等，如果我可以有一个功能，使我可以删除我选择的那个按钮，那将会很好 –

你将如何定位你想要删除的特定按钮？通过ID？ –

你可以用多种方法做到这一点，我设法做到这一点。

var increment = 0; 
 
function addButton(){ 
 
    var id = 'btn' + (increment++); 
 
    var que = $("#que"); 
 
    var el = $(`<button id='${id}'>Click for location(id:${id})</button>`); 
 
    que.append(el); 
 
    clickHandler(el); 
 
} 
 

 
function removeButton(id){ 
 
    if (increment >= 0) { 
 
    $(`button#${id}`).remove(); 
 
    
 
    } 
 
} 
 

 
    function clickHandler(el) { 
 
    el.click(function() { 
 
    getLocation(el); 
 
    }); 
 
} 
 

 
function getLocation(el) { 
 
    el.html("Loading...."); 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { showPosition(el, position); }); 
 
    } else { 
 
    el.html("Geolocation is not supported by this browser."); 
 
    } 
 
} 
 

 
function showPosition(el, position) { 
 
    el.html("Latitude: " + position.coords.latitude + 
 
    "<br>Longitude: " + position.coords.longitude); 
 
} 
 

 

 
document.getElementById('removeButton').addEventListener('click',function(){ 
 
    
 
    var input = $('#inputWithId') 
 
    var buttonIdToDelete = input?input.val():null 
 

 
    removeButton(buttonIdToDelete) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mainButtons"> 
 
<button onclick="addButton()">Add Contact</button> 
 
<button id="removeButton">Remove Contact</button> 
 
<label for="inputWithId">Button id:</label> 
 
<input id="inputWithId" /> 
 
</div> 
 
    </br> 
 
<div id="que"></div>

来源

2017-08-19 03:36:02

Dude you're awesome（y）This help a lot：D Thank you！ –

删除特定DOM元素有多种方式。

$(".btn").not(':first').remove(); // will remove all but first btn 
$(".btn").not(':last').remove(); // will remove all but last btn 
$(".btn").not(':last').not(':first').remove(); // will remove all in between first and last btn 

$(".btn").eq(-1).remove() // will remove the last occurrence of .btn 
$(".btn").eq(0).remove() // will remove the first occurrence of .btn 
$(".btn").eq(1).remove() // will remove the second occurrence of .btn

啊，但我认为你真正需要的只是删除被点击的按钮。

你可以这样做：

$(".btn").click(function (e) { 
$(e.target).remove(); 
}); // will remove the button that is being clicked

或者，如果你要删除的元素不被点击的人，但旁边是被点击

$(".btn").click(function (e) { 
$(e.target).prev().remove(); 
}); // will remove the closest previous element to the button being clicked

或

$(".btn").click(function (e) { 
$(e.target).next().remove(); 
}); // will remove the closest subsequent element to the button being clicked.

按钮

或

$(".btn").click(function (e) { 
$(e.target).next().next().remove(); 
}); // will remove the element after the closest subsequent element to the button being clicked.

依此类推。希望这可以帮助！

来源

2017-08-19 03:20:12 Crashtor

我很困惑哈哈我很抱歉。你能更专注于我的代码集吗？ –

为什么你在增加按钮后减去-1会增加你最后一个按钮的号码。所以你不必减去它。

function removeButton(){ 
    if (increment >= 0) { 
    $("#btn"+(increment)).remove(); 
    increment--; 
    } 
}

来源

2017-08-19 03:32:01

你知道添加和删除的替代方法吗？ –

如果你想删除或添加专门，那么你应该传递你的按钮ID在功能。另一种方法是你应该添加按钮和删除按钮从JavaScript。 –

您可以为所有按钮添加删除按钮，或者您可以为所有已添加的按钮设置复选框，并且只能删除已选中的按钮。 –

如何删除特定的按钮？

回答

相关问题